Question

我有一个导航栏作为列表 - 这是我的任务所需要的。无论如何，我试图让它居中，但它不是相当工作。发生了什么是我必须指定特定的边距。我对CSS和HTML很陌生。

＆＃13;

{
    background-color: #bdd2ed; 
    text-align: center;
}               


h1,h2
{
    font-family: sans-serif;
}


ul.navigbar
{
    margin: 0 auto;
    display: block;
    width: 100%;
}


li.navigbar
{
    list-style-type: none;
    width: 10%;
    text-align: center;
    float: left;
}


a.navigbar
{
    text-decoration: none;
    display:block;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>china_travel.html</title>
        <link rel="stylesheet" type="text/css" href="travel.css">
    </head>
    <body>
        <img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center">
        <h1 class="center">China Travel Deals</h1>
        <ul class="navigbar">
            <li class="navigbar"><a href="index.html" class="navigbar">Home</a></li>
            <li class="navigbar"><a href="australia_travel.html" class="navigbar">Australia Travel</a></li>
            <li class="navigbar"><a href="brazil_travel.html" class="navigbar">Brazil Travel</a></li>
            <li class="navigbar"><a href="china_travel.html" class="navigbar">China Travel</li>
            <li class="navigbar"><a href="us_travel.html" class="navigbar">United States Travel</li>
        </ul>
    </body>
</html>

＆＃13;

Answer 1

您可以使用此代码：

查看现场演示：https://output.jsbin.com/vukisat

https://jsbin.com/vukisat/14/edit?html,css,output

<强> HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>china_travel.html</title>
        <link rel="stylesheet" type="text/css" href="travel.css">
    </head>
    <body>
        <img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center">
        <h1 class="center">China Travel Deals</h1>
        <ul class="navigbar">
            <li><a href="index.html">Home</a></li>
            <li><a href="australia_travel.html">Australia Travel</a></li>
            <li><a href="brazil_travel.html">Brazil Travel</a></li>
            <li><a href="china_travel.html">China Travel</li>
            <li><a href="us_travel.html">United States Travel</li>
        </ul>
    </body>
</html>

<强> CSS：

body{
    background-color: #bdd2ed; 
    text-align: center;
}               
h1,h2{
    font-family: sans-serif;
}
ul.navigbar{
    margin: 0px;
    padding: 0px;
    display: block;
    width: 100%;
}
.navigbar li{
    list-style-type: none;
    width: 10%;
    text-align: center;
    display:inline-block;
}
.navigbar li a{
    text-decoration: none;
    display:block;
}

Answer 2

您可以使用flexbox。虽然我不太确定你在找什么。

https://jsfiddle.net/8pycp48z/

ul.navigbar
{
    margin: 0 auto;
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 0;
}

Answer 3

Mathy回答（对于任意数量的项目，任何填充的大小和中心）

HTML：

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

CSS：

ul {
  padding: 0px;
  margin: 0px;
  float: left;
  position: relative;
  left: 50%;
}

li {
  padding: 0px;
  margin: 0px;
  float: left;
  position: relative;
  right: 50%;
  list-style: none;
  padding: .5em;
  background-color:red;
}

小提琴：https://jsfiddle.net/xc4yktc5/

注意：您可能会在主UL上遇到溢出问题。

使水平导航栏居中

3 个答案: