使用 CSS 定位块元素
我试图获得或多或少类似于以下的布局,但“a”链接的宽度固定: http://jsfiddle.net/9SnJQ/
我可以通过将“a”链接更改为来指定固定宽度块元素,但最终我得到了这个布局: http://jsfiddle.net/Fh943/
我怎样才能充分利用两者(固定的正确定位宽度)?
I'm trying to get a layout more or less like the following, but with fixed width's for the 'a' links:
http://jsfiddle.net/9SnJQ/
I can specify a fixed width by changing the 'a' links to block elements, but then I end up with this layout:
http://jsfiddle.net/Fh943/
How can I get the best of both (the correct positioning with fixed widths)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
使用
display: inline-block;
作为a
标记。请参阅此更新的小提琴。Use
display: inline-block;
for youra
tags. See this updated fiddle.开头的几条评论:
你不应该使用 *. CSS 的解析方式是从右到左。这意味着,浏览器首先检查最后一个条件,在本例中为 *,即页面上的每个元素,然后检查先前的条件等。这是您可以使用的最无效的选择器。不惜一切代价避免它!
人们建议使用内联块。这在 IE7 中不起作用,也没有必要
好吧,这是我的制作方法 - 工作演示
Few comments at the beginning:
You should not use *. The way how CSS is being parsed is from RIGHT to LEFT. It means, that browser first checks the last condition, in this case *, which is EVERY ELEMENT ON THE PAGE and then it checks previous condition etc. This is the most INEFECTIVE selector you can use. Avoid it by all cost!
People are suggesting using inline-block. This will not work in IE7 and is not necessary
Ok, here is the way how I have made it - working demo