顯示div元素

我在我的div下拉列表中，輸入日期和按鈕三個要素，他們都在上格，我想他們都在同一條線上，沒有根據對方顯示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

display：inline-block –

https://jsfiddle.net/Lge9qhkz/使用內嵌塊 – TheValyreanGroup

-1

包裹在每一個div和顯示：內聯塊。

來源

2016-10-27 15:55:09 beefCMDR

您可以將display: inline-block屬性添加到div。這將使它們與內容一起呈現內聯，但它們保留其塊屬性，因此您仍然可以設置它們的寬度和高度。

例子：

.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

不要使用ID作爲樣式。 –

@JoeConsterdine如果不是ID，那我應該用什麼來代替？ –

使用一個類，ID導致特定性問題。 –

-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我不能教他在一個stackoverflow帖子中的CSS。我已經給他解決方案。如果他想學習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

回答

相關問題