2012-04-04 76 views
8

我們有一個自適應的佈局,其中一些列表中的元素以水平方式顯示:全證明了li元素

| Li1 | Li2 | Li 3 | Li4 | 

很顯然,我可以只設置

ul {width:100%} 
ul li {width:25%} 

要讓李的變化大小的瀏覽器改變大小。但是,即使瀏覽器展開,我們也希望最左側的li的左側邊緣與最右側的li右側邊緣對齊到左側邊緣對齊。

Li1 Li2 Li3  Li4 
|      | 

Li1  Li2  Li3  Li4 
|        | 

Li1 Li2 Li3 Li4 
|     | 

有沒有辦法用純css來做到這一點?

+0

當然,這正是您的示例CSS所做的嗎? – 2012-04-04 22:18:23

+0

只是要清楚 - 你在談論文本對齊?即你想讓最左邊的元素留下文本對齊,並且最右邊的有正確的文本對齊,也許...中間的元素有中心文本對齊? – Dan 2012-04-04 22:23:27

+0

不完全...對於示例css,li內的文本可以是左對齊,右對齊或中心對齊,因此不能保證文本將正確排列,只有li元素的框對齊邊緣。 – 2012-04-04 22:24:07

回答

17

使用this solution(或this one)。平移該答案的列表的結果:

標記:

<ul> 
    <li>Item1</li> 
    <li>Item2</li> 
    <li>Item3</li> 
    <li>Item4</li> 
</ul> 

樣式表:

ul {text-align: justify} 
ul::after {width: 100%; display: inline-block; content: "."; visibility: hidden} 
li {display: inline-block} 

這是一個IE7 +溶液。對於IE7,您需要與列表項目相鄰的附加元素。

0

http://jsfiddle.net/yUgYW/3/

這是我走到這一步..可能是一個開端,你

HTML

<div id="container"> 
<ul> 
    <li class="fisrt">1</li> 
</ul> 
<ul class="center"> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 
<ul> 
    <li class="last">5</li> 
</ul> 
</div>​ 

CSS

#container 
{ 
} 

li 
{float:left; 
border:1px solid red; 
width:120px;} 
.fisrt 
{ 
    float:left; 
} 
.last 
{ 
    float:right; 
} 
.center 
{ 
    width:400px; 
    margin:auto; 
}​ 
0

嗨,你定義文本對齊你立爲理由這樣

CSS

ul {width:100%} 


ul li {width:25%; 
    list-style:none; 
    display:inline-block; 
    text-align:justify; 
    margin:2px; 
    background:yellow; 
    word-wrap: break-word; 

} 

HTML

<ul> 
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li> 
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li> <li>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</li>  
</ul> 
這裏

現場演示http://jsfiddle.net/rohitazad/8UakC/8/

1

恕我直言,最好的方法是使用CSS3 Flexboxes:

.menu { 
    display: flex; 
    justify-content: space-around; 
} 
+0

非常酷!我發現[這裏](https://www.w3schools.com/csSref/playit.asp?filename=playcss_justify-content&preval=flex-end),但是'空間 - 之間'更準確地回答了這個問題。 – 2017-11-14 12:18:04