<div>
<ul>
<li>First</l1>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
div {
width: 100%;
}
li {
list-style: none;
float: left;
}
Run Code Online (Sandbox Code Playgroud)
使用CSS,有没有办法让LI标签自动填充父div的整个宽度?所以他们每人占25%.
将'width'指定为25%显然会起作用,但这不是我追求的解决方案.有问题的菜单是动态创建的,有时会创建和删除新项目.
干杯
有没有一种简单的方法可以使用CSS在父块容器中分发内联元素?将边距设置为自动不起作用,因为内联元素之间的边距设置为0并且我不想因为内容是动态的而导致百分比混乱.
特别是,我在段落(p)中有几个锚元素(a),它跨越80%的容器,我正在寻找一种简单的方法在段落内均匀分布它们.
编辑(@cletus):段落不会换行,锚点是段落中唯一的东西.通过均匀分布,我的意思是左(右)边和第一(最后)元素之间的空间和元素本身是等距的.
我有一个具有一定宽度的div,在这个'父'div中我想放置一个或多个'child'div.我希望它们彼此相邻(所以我使用float:left或display:inline-block)并且我希望它们都具有相同的宽度.我非常希望他们填充父div(所以如果我有4个div,他们应该每个都是25%宽度,如果5 20%宽度等)具有一定的最大宽度.它们的关键在于它无论div的数量都应该有效 - 可能是1,可能是5可能是15.
我已经尝试在下面的jsFiddle中执行此操作,但我无法弄清楚如何在没有任何JavaScript的情况下使其工作. 的jsfiddle
我想我的问题是div通常会扩展到内容的宽度,我希望它们扩展到适合父级?我可以在所有子div上尝试宽度:100%,但看起来这似乎不适合使用float:left或display:inline-block.
我一直在努力寻找这个,似乎无法找到解决方案.
我有一个客户希望菜单文本使用100%的菜单宽度,并使每个菜单项均匀分开.换句话说,最左边的菜单项应与左侧齐平,<nav>最右侧的菜单项应与其右侧齐平<nav>.
我通常设置<li>为text-align:center;,但在左侧和右侧留下空间.有没有办法用CSS和HTML来实现这一目标?在我的版本中,左侧很好,但右侧有空间.这是我的代码:
HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Tour</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Run Code Online (Sandbox Code Playgroud)
CSS:
nav ul{
display: table;
table-layout: fixed;
width: 100%;
padding: 0;
100px;
}
nav ul li {
list-style-type: none;
display: table-cell;
background: gray;
}
nav ul li a {
display:block;
}
Run Code Online (Sandbox Code Playgroud)
还有一个完全相同的东西:http://jsfiddle.net/zx4de/1/
任何帮助将非常感激.谢谢!