Question

我的问题是我希望导航链接之间有间距。我通过互联网搜索，但我得到的只是缩小了空间。具体来说，我希望每个导航链接之间有一个以黑色边框为边界的间距。

这些是导航栏的代码。我真的很感激一些帮助。谢谢。

ul {
    list-style-type: none;
    position: fixed;
    margin-top: 50px;
    padding: 0;
    width: 200px;
    background-color: #fff;
    border: 5px solid #000;
 }

 li a {
    display: block;
    color: #000;
    padding: 8px 16px;	
    text-decoration: none;
 }

 li {
    text-align: center;
    border-bottom: 5px solid #000; 
 }

li:last-child {
     border-bottom: none;
}

li a:hover {
    background-color: #555;
    color: white;
}

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

Answer 1

您需要使用边距来添加空白区域，但边框需要稍微调整一下，请参阅下面的评论

ul {
  list-style-type: none;
  position: fixed;
  margin-top: 50px;
  padding: 0;
  width: 200px;
  background-color: #fff;
  /*border: 5px solid #000; moved to LI element*/
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;  
  text-decoration: none;
  margin-bottom:10px; /*add some margin to create the white space*/
  border: 5px solid #000; /*add the border to each LI element rather than UL*/
}
li {
  text-align: center;
  /*border-bottom: 5px solid #000; remove this bottom border as handled in    LI css*/
}

Answer 2

这是：

<style>
ul {
    list-style-type: none;
    position: fixed;
    margin-top: 50px;
    padding: 0;
    width: 200px;
    }

 li a {
    display: block;
    color: #000;
    padding: 8px 16px;  
    text-decoration: none;
    border: 5px solid #000;
    background-color: #fff;
    }
 li {
    text-align: center;
    margin-bottom:10px;
}
li:last-child {
     margin-bottom:0;
}

li a:hover {
    background-color: #555;
    color: white;
}
</style>



<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
 </ul>

演示： https://jsfiddle.net/4fLbx4xa/

Answer 3

 <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
 </ul>

           <style> 
            ul {
                list-style-type: none;
                position: fixed;
                margin-top: 50px;
                padding: 0;
                width: 200px;
                background-color: #fff;
                }

             li{
               width:100%;
                display: block;
                margin-top:10px; //this is the height you want
                 border: 5px solid #000; 
                 color: #000;
                 background:#000;
                 padding:10px 0;
                }
             li  a  {
                text-align: center;
                padding: 8px 16px;  
                text-decoration: none;
                color:#fff;
            }

            li:first-child {
                margin-top:0;
            }

            li:hover {
                background-color: #555;
                color: white;
            }
    </style>

Answer 4

不确定你想要实现什么，但我理解链接之间的界限，如果你想在链接下面这也可以帮助你..

＆＃13;

ul {
    list-style-type: none;
    position: fixed;
    margin-top: 50px;
    padding: 0;
    width: 400px;
    background-color: #fff;
    border: 5px solid #000;}

 li a {
    display: block;
    color: #000;
    padding: 8px 16px;  
    text-decoration: none;}
 li {
    text-align: center;
    float: left;
    border-right:solid 1px black;
}

li a:hover {
    background-color: #555;
    color: white;
}

＆＃13;

 <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
 </ul>

＆＃13;

导航链接之间的间距

4 个答案: