divs什麼時候填滿水平空間，他們什麼時候不需要？

從這裏的所有問題，我假設大多數人都希望他們的div（或lis或其他）填補水平空間。我希望他們只要我需要的時間。在這裏，他們填補了水平空間：divs什麼時候填滿水平空間，他們什麼時候不需要？

我可以讓UL元素有顯示：inline-block的，這使得它在水平方向收縮，但如果我把LIS內聯塊，它們開始出現並排，這不是我想要的。我希望LIs只有他們需要的那麼寬。

此外，什麼時候應該div（或ul或li或其他）填充水平空間，什麼時候不應該？

HTML：

<div id="center_main"> 
    <div id="data_box" class="center_box"> 
     <ul id="keys"> 
      <li class="key">key1</li> 
      <li class="key">key1 . key2</li> 
      <li class="key">key1 . key3</li> 
      <li class="key">key1 . key3 . key4</li> 
      <li class="key">key5</li> 
     </ul> 
    </div> 
</div>

CSS：（約重複的遺憾，他們是從兩個不同的文件，layout.css中和colors.css未來）

#center_main { 
    margin: 25px auto; 
} 

.center_box { 
    margin: 10px 0px; 
    padding: 3px; 
} 

#keys { 
    padding: 0px; 
    margin: 0px 2px; 
} 

#keys li { 
    padding: 1px 3px; 
    margin: 3px 0px; 
} 

body { 
    background-color: #F1F1F1; 
    color: #333333; 
} 

.center_box { 
    background-color: #FFFFFF; 
    box-shadow: 0 0 10px #333333; 
    border-radius: 4px; 
    border: 0px solid #3981EC; 
    border-width: 4px 0px 0px 0px; 
} 

#keys { 
    list-style: none; 
} 

#keys li { 
    background-color: #666666; 
    color: #FFFFFF; 
    border-radius: 4px; 
} 

#keys li:hover{ 
    background-color: #3981EC; 
}

來源

2013-07-20 whiterook6

一個div充滿水平的空間，因爲它是一個block-level element，但你可以通過明顯改變它的display屬性類似inline或inline-block更改此行爲。您可以在該鏈接上看到該列表（ul，ol和dl）也是塊級元素。對於你的情況，如果你想要一個元素只佔用它需要的空間，那麼你應該使用inline或inline-block（內聯塊允許你添加填充/邊距等）。但是，正如您所指出的那樣，因爲這會刪除DIV/UL的默認塊性質，因此每個元素都會在同一水平行上跟隨下一個元素。

爲了克服這個問題，你應該使用float屬性，它會刪除元素的塊性質，但後來也應用clear屬性，它會刪除浮動的每個元素，從而使每個元素只佔用的空間也同時確保他們都處於不同的路線。

還要確保清單後面的元素已清除，或者將micro-clearfix hack應用於列表。

和here's your example編輯按照您所描述的方式工作。

HTML

<!-- Note added the .cf class --> 
<ul id="keys" class="cf"> 
    <li class="key">key1</li> 
    <li class="key">key1 . key2</li> 
    <li class="key">key1 . key3</li> 
    <li class="key">key1 . key3 . key4</li> 
    <li class="key">key5</li> 
</ul>

CSS

#keys li { 
    padding: 1px 3px; 
    margin: 3px 0px; 
    float:left; 
    clear:both; 
}

來源

2013-07-20 21:22:54

你可以嘗試
float:left; clear:both;
對於每個列表元素。

至於什麼時候他們填充他們的水平空間，這取決於你顯示他們的方式。一個display：block元素將無論其內容填充整個寬度，或者寬度爲xx;設置它將是你設置的確切寬度。內聯塊和內聯塊的間隔相似，因爲它們佔據內容的空間，除非給出精確的寬度並嘗試水平排列，直到它們耗盡空間。

來源

2013-07-20 21:18:09

這將起作用，如果您需要爲'ul'或'div'添加背景顏色，則需要使用'clearfix'。其中一個不是，每個元素都有自己的大小，不會擴大到最大的集合。 – hungerstar

with width：auto，div將會和父母一樣寬 auto是寬度的默認值。

來源

2013-07-20 21:20:19 Madeyedexter

股利是一種類型的稱爲塊級元素的元素。塊級元素默認填充其容器的所有水平空間，因爲默認情況下它們具有樣式屬性display：block;。

要使任何塊級元素只展開其內容，即內聯級別，請將其css屬性設置爲display：inline。
這是解決您的問題的方法。
至於你的第二個問題，（當一個div填滿一個水平空間，當它不應該時），這是你的要求。您可以在內嵌塊級別元素，反之亦然。

這就是說，將div或p元素設置爲內聯級元素是一個糟糕的設計。您可以簡單地使用範圍或任何其他內聯級容器。通常的例外情況是使用li。

李是塊級別的，但如果你想讓他們水平，並且不想浮動他們，你可以讓他們內聯。請注意，通過這樣做，每個李的寬度將只與其內容一樣寬。而且，內聯級元素不能設置其填充。

希望這有助於。

來源

2013-07-20 21:30:53

divs什麼時候填滿水平空間，他們什麼時候不需要？

回答

相關問題