[英]Evenly distribute li items, with absolute width
In the footer of a responsive website, I need to evenly distribute some li items. 在响应式网站的页脚中,我需要平均分配一些li项目。
This is what I want to achieve: 这是我要实现的目标:
And this is what I have: 这就是我所拥有的:
I would like to avoid setting absolute width for each li, to keep a responsive capability of this part of the website. 我想避免为每个li设置绝对宽度,以保持网站这一部分的响应能力。
What would be the optimal way to proceed? 最佳的进行方式是什么?
You could try 你可以试试
text-align:justify;
for your ul element 为你的ul元素
here is a fiddle 这是一个小提琴
http://jsfiddle.net/89bnF/833/ http://jsfiddle.net/89bnF/833/
The effect in your screenshot can be achieved by using a margin: 屏幕截图中的效果可以通过使用边距来实现:
.bottomMenu li {
margin-right: 24px;
}
If you want a nice, justified look and you are not concerned with very old browsers, you can use a flex model: 如果您想要美观,合理的外观并且不关心非常旧的浏览器,则可以使用flex模型:
.bottomMenu (
display: flex;
justify-content: space-between;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.