完全合理的li元素

时间:2012-04-04 22:16:47

标签: html css

我们有一个自适应布局,其中一些列表元素水平显示:

| Li1 | Li2 | Li 3 | Li4 |

显然我可以设置

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

在浏览器更改大小时获得li的更改大小。但是,我们希望最左边的li的左边缘与左边缘对齐,最右边的li右边缘与右边缘对齐,即使浏览器展开也是如此。

Li1    Li2    Li3     Li4
|                       |

Li1      Li2      Li3       Li4
|                             |

Li1  Li2  Li3   Li4
|                 |

有没有办法用纯CSS进行此操作?

4 个答案:

答案 0 :(得分: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,您需要在列表项旁边添加一个额外的元素。

答案 1 :(得分:1)

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

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

答案 2 :(得分: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;
}​

答案 3 :(得分: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/