Question

.body-color {
    background: rgb(27,39,57)
}

a {
    text-decoration: none;
    color: red;
    padding-right: 20px;

}

li {
    display: inline-block;
    padding-right: 30px;
}   

#menu {
    text-align: center;
    background-color: white;
    padding-bottom: 100px;
}

我试图在锚和李中填充/边距，但没有任何反应如何在每个菜单选项之间添加间距？

我的HTML，我将它分配到错误的地方吗？：

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/reset.css">
    <title>My Website</title>
</head>
<body class="body-color">
<h1 class="logo"><h1>
<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portrait</a></li>
        <li><a href="#">Product Showcase</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
</body>
</html>

Answer 1

假设您没有定位边缘或IE，请显示：flex是一种更好的方式来做您正在做的事情。

#menu {
    display:flex;
    justify-content: space-between;
}

会导致每个列表项均匀分布。为了使用flex练习基本的CSS技能，我会看一下this website。他们有很多很棒的基本弹性使用教程。

Answer 2

你试过这个吗？你不必给予宽度但是会为每个元素管理相同的宽度。

ul {
    width: 100%;
    display: table;
    table-layout: fixed; /* the magic dust that ensures equal width */
    background: #ccc
}
ul > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}
ul > li > a {
    display:block;
    padding:50px;
}

Answer 3

解决了问题。跟着

＆＃13;

.body-color {
    background: rgb(27,39,57)
}
#menu {
    text-align: center;
    background-color: white;
    padding-bottom: 100px;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
}  

a {
    text-decoration: none;
    color: red;

}

＆＃13;

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portrait</a></li>
    <li><a href="#">Product</a></li>
    <li><a href="#">Showcase</a></li>
    <li><a href="#">Contact</a></li>
</ul>

＆＃13;

Answer 4

    .body-color {
      background: rgb(27,39,57)
    }
    a {
      text-decoration: none;
      transition: .3s;
    }   
    #menu {
      text-align: center;
      background-color: white;
      padding-bottom: 100px;
    }
    #menu ul li {
      display: inline-block;
    } 
    #menu ul li + li {
      margin-left: 30px;
    }
    #menu ul li a {
      color: #000;
    } 
    #menu ul li a:hover {
      color: #f10;
    }

    <html>
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/reset.css">
        <title>My Website</title>
      </head>
      <body class="body-color">
        <h1 class="logo"></h1>
        <div id="menu">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portrait</a></li>
            <li><a href="#">Product Showcase</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </body>
    </html>

Answer 5

如果不需要支持IE 9或更低版本。我推荐flex：

* { margin: 0; padding: 0; }
#menu {
  position: relative;
  display: flex;
  justify-content: space-evenly; /* 'space-around' for just filled space */
  width: 100%;
  
  /* list nav normalization */
  list-style: none;
  margin: 0;
  padding: 0;
  
  /* Additional Options */
  align-items: center;
  align-content: center; 
  
  /* For clarity in this example, remove this when your done */
  background-color: rgba(0,0,0,.1);
}
#menu li {
  display: inherit;
  /* For clarity in this example, remove this when your done */
  background-color: rgba(0,0,0,.1);
}
#menu a { 
  padding: 10px;
  text-decoration: none;
  color: red;
  
  /* For clarity in this example, remove this when your done */
  background-color: rgba(0,0,0,.1);
}

<nav id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portrait</a></li>
    <li><a href="#">Product Showcase</a></li>
    <li><a href="#">Contact</a></li>
</nav>

Answer 6

我认为将display: inline-block;添加到菜单项可能会有效。

Answer 7

检查此链接，您可以向任何方向添加填充。

https://codepen.io/jackstride/pen/JLpPgZ

li a { padding: 50px;

}

导航菜单中的间距（HTML / CSS）

7 个答案: