Display DIV элементов в одной строке

У меня есть три элемента в моей ДИВОМ выпадающем списке, дате ввода и кнопках все они находятся в на DIV, я хочу, чтобы все из них, чтобы быть в той же строке, а не друг под другимDisplay DIV элементов в одной строке

<div id="cont"> 
 
    Status : 
 
    <select id="dropdown"> 
 
    <option value="Approved">Approved</option> 
 
    <option value="Rejected">Rejected</option> 
 
    <option value="Pending">Pending</option> 
 
    <option value="Error">Error</option> 
 
    </select> 
 
    <!-- Date Picker --> 
 
    <p>Date: 
 
    <input type="text" id="datepicker"> 
 
    </p> 
 
    <button type="submit" id="searchBtn" value="">Search</button> 
 
</div>

источник

2016-10-27 Mohamed Nagy

Что CSS вы пробовали? – j08691

дисплей: встроенный блок –

https://jsfiddle.net/Lge9qhkz/ Использовать встроенный блок – TheValyreanGroup

-1

компресс каждый в сНу и отображения: встроенный блок.

источник

2016-10-27 15:55:09 beefCMDR

Вы можете добавить недвижимость display: inline-block в divs. Это заставит их визуализировать встроенный контент, но они сохраняют свои свойства блока, поэтому вы можете установить их ширину и высоту, например.

Пример:

.inline { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 20px; 
 
} 
 

 
#red { 
 
    background-color: red; 
 
} 
 

 
#green { 
 
    background-color: green; 
 
} 
 

 
#blue { 
 
    background-color: blue; 
 
}

<div class="inline" id="red"></div> 
 
<div class="inline" id="blue"></div> 
 
<div class="inline" id="green"></div>

Мой любимый учебник сайт о теме: http://learnlayout.com/inline-block.html

Это может быть использовано для каждого элемента, который поддерживает display свойство. Некоторые элементы даже устанавливаются по умолчанию, например, элемент span.

источник

2016-10-27 15:55:46

Не используйте идентификаторы для стилизации. –

@JoeConsterdine Если нет идентификаторов, то что я должен использовать вместо этого? –

Используйте проблемы со спецификой класса, идентификатора. –

-1

https://jsfiddle.net/v9qxobaf/

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>test</title> 
</head> 
<style media="screen"> 
#cont { 
    margin-left: -20px; 
} 
.status, .date, .button { 
    float: left; 
    padding-left: 20px; 
} 
</style> 
<body> 
    <div id="cont"> 

     <div class="status"> 
      <label>Status: </label> 
      <select id="dropdown"> 
       <option value="Approved">Approved</option> 
       <option value="Rejected">Rejected</option> 
       <option value="Pending">Pending</option> 
       <option value="Error">Error</option> 
      </select> 
     </div> 

     <div class="date"> 
      <!-- Date Picker --> 
      <span> Date: <input type="text" id="datepicker"></span> 
     </div> 

     <div class="button"> 
      <button type="submit" id="searchBtn" value="">Search</button> 
     </div> 

    </div> 
</body> 
</html>

источник

2016-10-27 15:56:27

«Дайте человеку рыбу, и вы накормите его на день, научите его ловить рыбу, и вы кормите его на всю жизнь» –

@ Bálint Я не могу научить его CSS в post stackflow post. Я дал ему решение. Если он хочет изучить CSS, там есть 10000 учебных пособий. Он должен быть доволен рыбой. –

Это еще не значит, что вы должны опубликовать полный код без комментариев/описания о том, что изменилось. –

Использование CSS с display: inline-block

.inline { 
 
    display: inline-block; 
 
}

<div id="cont"> 
 
    Status: 
 
    <select id="dropdown" class="inline"> 
 
    <option value="Approved">Approved</option> 
 
    <option value="Rejected">Rejected</option> 
 
    <option value="Pending">Pending</option> 
 
    <option value="Error">Error</option> 
 
    </select> 
 
    <!-- Date Picker --> 
 
    <p class="inline">Date: 
 
    <input type="text" id="datepicker"> 
 
    </p> 
 
    <button type="submit" id="searchBtn" value="" class="inline">Search</button> 
 
</div>

Хотя выше работ, это лучшая практика, чтобы поставить определенные элементы в span тега. Как и ...

.inline { 
 
    display: inline-block; 
 
}

<div id="cont"> 
 
    <span class="inline">Status: 
 
    <select id="dropdown"> 
 
     <option value="Approved">Approved</option> 
 
     <option value="Rejected">Rejected</option> 
 
     <option value="Pending">Pending</option> 
 
     <option value="Error">Error</option> 
 
    </select> 
 
    </span> 
 
    <!-- Date Picker --> 
 
    <span class="inline"> 
 
    <p>Date: <input type="text" id="datepicker"></p> 
 
    </span> 
 
    <span class="inline"> 
 
    <button type="submit" id="searchBtn" value="">Search</button> 
 
    </span> 
 
</div>

источник

2016-10-27 20:44:05 Jim

Display DIV элементов в одной строке

ответ

Смежные вопросы