css - 在不改变边框宽度的情况下向水平菜单添加填充答案

【问题标题】：css - add padding to the horizontal menu without changing width of the bordercss - 在不改变边框宽度的情况下向水平菜单添加填充
【发布时间】：2015-11-13 04:31:21
【问题描述】：

我有http://jsfiddle.net/dfo44q7f/3/

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Untitled</title>
    <link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<ul class="nav">
  <li><a href="/">Menu1</a></li>
  <li><a href="/Menu2/">Menu2</a></li>
  <li><a href="/Menu3/">Menu3</a></li>
</ul>
</body>
</html>

我该怎么做：

我希望菜单下方的行与文本一样宽
还要在 li 的左右添加填充

【问题讨论】：

将您的 ul.nav 包装在另一个 div 中，您将拥有更多控制权
您可以使用margin 属性。

标签： css text alignment

【解决方案1】：

我认为您正在寻找保证金..

.nav li{
    display:inline;
    border-bottom: 1px solid currentColor;
    text-align: center;
    padding: 0px 0px 10px 0px;
    margin-left:50px; 
}

【讨论】：

margin: 0 25px; 将在左右两边应用相等的边距并保持菜单居中。

【解决方案2】：

我想你想要这样的东西？

http://jsfiddle.net/dfo44q7f/5/

ul {
    width: 100%;
    list-style-type: none;
    margin: auto;
    white-space: nowrap;
}
.nav {
    border-bottom:1px solid #ccc;
    list-style:none;
    margin:0;
    padding:0;
    text-align: center;
    padding-bottom: 10px;
    width : 200px;
    margin : auto;
    overflow : hidden;
}
.nav li {
    display:block;
    float : left;
    text-align: center;
    padding: 0;
    width : 33.33%;
}
.nav a {
    display:inline;
    text-decoration: none;
    color: #999;
    border-bottom: 1px solid currentColor;
    padding-bottom : 5px;
}
.nav a:hover {
    color: #0088cc;
}

如果这是您想要的，我会解释我在您的代码中所做的更改，

【讨论】：

不完全是。 1-导航应该是整个页面的宽度。 2-“菜单”文本下方的下划线应与下方的边框对齐。