CSS内联块不工作？

你无法想象这是多么令人沮丧，只是创建简单的代码，他们不工作:( 我想这个代码使导航HORIZ并设置宽度每一个在它们之间CSS内联块不工作？

HTML代码中分离：

<ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">What</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">Support</a></li> 
    </ul>

CSS：

body{margin:0;} ul{list-style-type:none;margin:0;padding:0;display:block;} 
li{float:left;} a{width:60;}

来源

2013-07-24 CanYouSmell

你想做什么？如果你希望他们都在同一条线上，就会发生。 –

是的，如果我们知道你想要做什么，这将有所帮助;） – SharkofMirkwood

预期的和实际的行为，请吗？现在我们完全不知道你在问什么。 – MathSquared

我想你可能会想你的链接全部是60像素宽。如果是这样的话，变化：

a{width:60;}

要：

a { width: 60px; display: inline-block;}

“60”对自己是不是一个CSS宽度公认的测量，你需要inline-block的从只是被当作一个文本行停止。

但是，如果你想改善这一点，并使每个链接分开相同的数量（因为它是一些链接比其他人更接近在一起），我会在利率上，像这样：

li { margin-right: 40px; }

来源

2013-07-24 01:45:04 SharkofMirkwood

这也没有工作:(所有在垂直线上，当然没有宽度 – CanYouSmell

它适用于我很好：http://jsfiddle.net/HsDRy/ – SharkofMirkwood

但整个区域不可点击吗？ – CanYouSmell

我想你可能希望它显示内联（全部在一行中）。如果是这种情况，您需要将display属性添加到您的li ，那么您可以使用内联或内联块。

例如：李{浮动：左;显示：内联;}

来源

2013-07-24 01:46:28

这对我有效:)但:(块“值不工作，它不'让整个链接区域是可点击的 – CanYouSmell

不知道你真的要在这里做什么？我同意SharkofMirkwood我想。使用：

a { width: 60px; display: inline-block; margin: 0 10px;}

添加一些边距将有助于将它们分隔开。此外，请使用:last-of-type来防止最后一个列表项锚点中断导航。检查出Mozilla Developer Network。它可以帮助你理解这一切是如何工作的。

来源

2013-07-24 02:25:35 cpk

CSS内联块不工作？

回答

相关问题