css

Question

<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的左右两边加上padding

Answer 1

我想你是在寻找保证金..

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

Answer 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;
}

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

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

css - add padding to the horizontal menu without changing width of the border

text

alignment