当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Spacing between navigation links

问题描述:

My problem is that I want to have spacing between the navigation links. I have searched over the internet but all I get are reducing the space.

To be specific, I want to have spacing in between each navigation link that are bordered with a black border.

These are my codes for the navigation bar. I would really appreciate some help. thank you.

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>

网友答案:

Here it is:

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

Demo: https://jsfiddle.net/4fLbx4xa/

网友答案:
 <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>
网友答案:

You need to use margin to add the white space, but the borders needed a little tweaking, see comments below

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*/
}
网友答案:

Not sure what you want to achieve but i understood a line between the links, this might help you also if you want it below the links..

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;
}
 <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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: