导航菜单中的间距 (HTML/CSS)

问题描述 投票：0回答：7
.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;
}

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

我的 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>
html css spacing
7个回答
0
投票

假设您的目标不是边缘或 IE，则 display: flex 是完成您正在做的事情的更好方法。 

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

将导致每个列表项均匀分布。为了使用 Flex 练习基本的 CSS 技能，我会看看这个网站。他们有很多关于基本 Flex 使用的很棒的教程。

0
投票

你尝试过这个吗？您不必给出宽度，但会为每个元素管理相等的宽度。

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;
}
0
投票

答案已解决。已关注 

.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;

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

0
投票

    .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>

0
投票

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

* { 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>

-1
投票

我认为将 

display: inline-block;
添加到菜单项可能会起作用。

-1
投票

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

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

li a { padding: 50px;

}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.