Question

无法将我的所有导航栏选项排成一行。正如你在这里看到的那样：

https://jsfiddle.net/knyx2u8h/` 示例域

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">

    #HomeNav {
    background: #132D93; /* Old browsers */
    background: -moz-linear-gradient(left,  #0000CD  32%, #4169E1 50%, #0000CD  68%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(32%,#0000CD ), color-stop(50%,#4169E1), color-stop(68%,#0000CD )); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #0000CD  32%,#4169E1 50%,#0000CD  68%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #0000CD  32%,#4169E1 50%,#0000CD  68%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #0000CD  32%,#4169E1 50%,#0000CD  68%); /* IE10+ */
    background: linear-gradient(to right,  #0000CD  32%,#4169E1 50%,#0000CD  68%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000CD', endColorstr='#0000CD',GradientType=1 ); /* IE6-9 */
    border-bottom: 5px solid #B9975B;
    margin-top:25px;


    }
    #HomeNav a {
    display: block;
    padding: 20px 10px;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-decoration:none;

    }
    #HomeNav a:hover, #global_nav a.active {
         background-color: #00008B;
         text-decoration: none;
    }

    #HomeNav ul {
         width:1200px;
        /*margin:0 auto;*/
        margin-left:-40px;
        /*position:relative;*/
         text-align:left;   


    }

    #HomeNav ul li{
         /*display:inline-block;    */
    display: inline-block;
    list-style-type: none;
    padding-right: 0px;


    }



    </style>    
</head>

<body>

     <nav id="HomeNav">
     <ul>
         <li><a href="Pages/About/about.html" > About</a></li>
         <li><a href="Pages/Who We Are/who we are.html" > Who We are</a></li>
         <li><a href="Pages/Latest publications/latest publications.html" >Latest Publications </a></li>
         <li><a href="Pages/Online Centre/online centre.html" >Online Centre </a></li>
         <li><a href="Pages/Our Partners/our partners.html" >Our Partners </a></li>
         <li><a href="Pages/English my way/english my way.html" >English My Way </a></li>
         <li><a href="Pages/Apprenticeship/apprenticeship.html" >Apprenticeship </a></li>
         <li><a href="Pages/it academy/it academy.html" >IT Academy </a></li>
         <li><a href="Pages/languagesense/languagesense.html" >Language Sense </a></li>

     </ul>
    </nav>

</body>
</html>

Answer 1

替换此css：

        #HomeNav a {
        display: block;
        padding: 20px 10px;
        color: #ffffff;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 0.5px;
        text-decoration: none;
}

用这个试试。

#HomeNav a {
    display: block;
    padding: 20px 7px;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-decoration: none;
}

感谢。

Answer 2

这只是示例您可以更多地了解它 - Demo: Navigation Bars

#HomeNav {
    background: #132D93; /* Old browsers */
    background: -moz-linear-gradient(left,  #0000CD  32%, #4169E1 50%, #0000CD  68%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(32%,#0000CD ), color-stop(50%,#4169E1), color-stop(68%,#0000CD )); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #0000CD  32%,#4169E1 50%,#0000CD  68%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #0000CD  32%,#4169E1 50%,#0000CD  68%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #0000CD  32%,#4169E1 50%,#0000CD  68%); /* IE10+ */
    background: linear-gradient(to right,  #0000CD  32%,#4169E1 50%,#0000CD  68%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000CD', endColorstr='#0000CD',GradientType=1 ); /* IE6-9 */
    border-bottom: 5px solid #B9975B;
    margin-top:25px;


    }
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}
 #HomeNav a:hover, #global_nav a.active {
         background-color: #00008B;
         text-decoration: none;
    }
li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 10px 6px;
   
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

<nav id="HomeNav">
     <ul>
         <li><a href="Pages/About/about.html" > About</a></li>
         <li><a href="Pages/Who We Are/who we are.html" > Who We are</a></li>
         <li><a href="Pages/Latest publications/latest publications.html" >Latest Publications </a></li>
         <li><a href="Pages/Online Centre/online centre.html" >Online Centre </a></li>
         <li><a href="Pages/Our Partners/our partners.html" >Our Partners </a></li>
         <li><a href="Pages/English my way/english my way.html" >English My Way </a></li>
         <li><a href="Pages/Apprenticeship/apprenticeship.html" >Apprenticeship </a></li>
         <li><a href="Pages/it academy/it academy.html" >IT Academy </a></li>
         <li><a href="Pages/languagesense/languagesense.html" >Language Sense </a></li>

     </ul>
    </nav>

用于网站的单行导航栏

2 个答案: