Full-biện minh cho các yếu tố li

Question

Chúng tôi có một bố cục thích nghi, nơi một số yếu tố danh sách được hiển thị theo chiều ngang:

| Li1 | Li2 | Li 3 | Li4 | 

Rõ ràng tôi có thể chỉ cần đặt

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

Để có kích thước thay đổi của li như trình duyệt thay đổi kích thước. Tuy nhiên, chúng tôi muốn cạnh bên trái của li trái nhất để căn chỉnh với cạnh trái với cạnh phải nhất bên phải li thẳng hàng với cạnh phải ngay cả khi trình duyệt mở rộng.

Li1 Li2 Li3  Li4 
|      | 

Li1  Li2  Li3  Li4 
|        | 

Li1 Li2 Li3 Li4 
|     | 

Có cách nào để làm điều này với css thuần túy không?

Answer 1

Sử dụng this solution (hoặc this one). Dịch câu trả lời rằng đến một kết quả danh sách trong:

Markup:

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

Phong cách tấm:

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

Đây là một giải pháp IE7 +. Đối với IE7, bạn cần thêm một phần tử bên cạnh các mục danh sách.

Answer 2

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

đây là những gì tôi có được điều này xa .. có thể là một sự khởi đầu cho bạn

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; 
}​ 

Answer 3

Hi bạn xác định văn bản class biện minh trong bạn li như thế này

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> 

sống bản demo đây http://jsfiddle.net/rohitazad/8UakC/8/

Answer 4

IMHO, cách tốt nhất là sử dụng CSS3 Flexboxes:

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