ul>李风格，并保持在一条线内

我想创建一个菜单列表项有4个项目，但它不会在一行内出于某种原因馈送。我试图用嵌套的div嵌套它，但没有运气。当我添加padding: 10px;时，问题开始发生。ul>李风格，并保持在一条线内

下面是最新的HTML和CSS我有：

HTML：

<div id="header"> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Info</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div>

CSS：

#menu { 
    margin: 0; 
    padding: 0; 
} 

#menu li { 
    display: block; 
    float: left; 
    margin: 0; 
    width: 25%; 
    background-color: gray; 
    padding: 10px; 
}

我也有一个的jsfiddle：http://jsfiddle.net/GLh92/1/

由于你可以看到，它不适合在一条线内。我在这里也有一个回应问题。所以，它需要适合不同的屏幕分辨率。

任何想法如何以干净的方式做到这一点？

来源

2013-03-19 tugberk

为一体，闭上你的锚标签.. – kingkode 2013-03-19 19:03:06

@McMastermind这是一个错字错。固定。 – tugberk 2013-03-20 07:53:04

使用box-sizing: border-box在li元素。这将使宽度计算的填充部分成为可能。

http://jsfiddle.net/ExplosionPIlls/GLh92/5/

来源

2013-03-19 19:04:13

这种情况怎么样？ http://jsfiddle.net/GLh92/365/ 任何方式保持在同一行？ – Max 2016-07-15 12:46:45

填充为您的元素添加宽度和/或高度，您应该处理元素的子元素的填充或边距。

来源

2013-03-19 19:03:57 Gabor

看看盒子大小的CSS属性，它会改变你的生活。

#menu li { 
    display: inline-block; 
    float: left; 
    margin: 0; 
    width: 25%; 
    background-color: gray; 
    padding: 10px; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

来源

2013-03-19 19:04:12

当你提到padding:10px;它也增加了<li>项目的宽度。所以，你需要采取的width:20%;

护理试试这个：

#menu li { 
    display: block; 
    float: left; 
    margin: 0; 
    width: 20%; 
    background-color: gray; 
    padding:10px; 
}

它将来自同一线下。这是你在找什么？

来源

2013-03-19 19:04:42

@Axel对于你的概率也有不同的解决方案。 – 2013-03-20 05:30:32

解决的办法是将填充添加到<a>标记，而不是<li>标记，因为填充会增加实际宽度。

删除填充从<li>
添加padding: 10px;到<a>
闭上你的<a>标签

http://jsfiddle.net/GLh92/7/

HTML：

<div id="header"> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Info</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div>

CSS：

#menu { 
    margin: 0; 
    padding: 0; 
} 

#menu li { 
    display: block; 
    float: left; 
    margin: 0; 
    width: 25%; 
    background-color: gray; 
} 

#menu li a { 
    display: block; 
    padding: 10px; 
}

来源

2013-03-19 19:05:44 Axel

的问题是，你是宽度设定为25％至每个li元素的。（25 * 4 = 100）但是当你添加填充时，其中一个元素移动到下一行。（25 * 4 + 10（padding）> 100）你有四个列表元素，只要没有填充（25 * 4 = 100）

变化幅度别的东西线值15％

#menu li { 
display: inline-block; 
float: left; 
margin: 0; 
width: 15%; 
background-color: gray; 
padding: 10px;

}

http://jsfiddle.net/GLh92/9/

来源

2013-03-19 19:07:22 Tomarinator

谢谢，但这不是解决方案。我想完全用4个项目来填充这一行，并且我也想让它响应不同的屏幕分辨率。看到接受的答案。 – tugberk 2013-03-20 07:52:31

ul>李风格，并保持在一条线内

回答

相关问题