Question

我正在尝试将菜单/导航栏水平居中。我无法弄清楚我做错了什么/被遗忘了。在我的最后一个li是正确的填充之后。如何删除它？

HTML

<div class="wrapper">
   <div class="header"></div>
   <div class="Header"></div>
   <ul class="menu">
     <li>Home</li>
     <li>Over mij</li>
     <li>Mijn diensten</li>
     <li>Contact</li>
   </ul>
</div>

CSS

.wrapper {
  width: 100%;
}

.menudiv {
  width: 80%;
  border: 1px red solid;
  margin: auto;
}

.menu {
  text-align: center;
  border: 1px red solid;
  position: relative;
  display:inline-block;         
  transform: translateX(-50%);
  left: 50%;
  color: black;
  padding-left: 20%;
  padding-right: 18%;
  min-width: 80%;
  max-width: 80%;       
}

.menu li {
  float: left;
  display: block;
  padding-right: 5%;
}

.menu li:after {
  content: '/';
  padding-left: 20px;
}

https://jsfiddle.net/sdzLn5hd/

Answer 1

嗯，首先，您确定这是HTML代码应该如何吗？

<div class="Header">
</div>  
<ul class="menu">
   <li>Home </li>
   <li>Over mij </li>
   <li>Mijn diensten </li>
   <li>Contact </li>
</ul>

而不是：

<div class="Header">
    <ul class="menu">
       <li>Home </li>
       <li>Over mij </li>
       <li>Mijn diensten </li>
       <li>Contact </li>
    </ul>  
</div>

我建议你先检查一下。

其次，您的menu居中（菜单项不是。也许这就是您的意思）。只需查看您的CSS并向其中添加background-color就可以了解情况。

.wrapper {

    width: 100%;

}

.menudiv {

    width: 80%;

    border: 1px red solid;

    margin: auto;

}

.menu {


    border: 1px red solid;

    padding: 55px 0;

    position: relative;

    display:inline-block;

    transform: translateX(-50%);

    left: 50%;

    color: black;

    width: 80%;

}

.menu li {

    float: left;

    display: block;

    padding-right: 5%;

}

.menu li:after {

    content:'/';

    padding-left: 20px;

}

div.wrapper {
    
    background-color: orange;
}

  
        <title>Webdesign Maarten</title>
        
    
    
    <body>
        <div class="wrapper">
            <div class="header">
                <!-- hier image te zetten JQuery prefereerbaar Sliding !-->
            </div>
            <div class="Header">
                <!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
            </div>
            <ul class="menu">
                <li>Home</li>
                <li>Over mij</li>
                <li>Mijn diensten</li>
                <li>Contact</li>
            </ul>
        </div>
    </body>

</html>

现在，在解决方案上，我不确定您到底在寻找什么，但我可以为您推荐两种可能的解决方案。

解决方案1：

修改.menu li课程如下：

.menu li {
    display: block;
    text-align: center;
}

见下文：

.wrapper {
    width: 100%;
}
.menudiv {
    width: 80%;
    border: 1px red solid;
    margin: auto;
}
.menu {
    border: 1px red solid;
    padding: 55px 0;
    position: relative;
    display:inline-block;
    transform: translateX(-50%);
    left: 50%;
    color: black;
    width: 80%;
}
.menu li {
    display: block;
    text-align: center;
}
.menu li:after {
    content:'/';
    padding-left: 20px;
}

<title>Webdesign Maarten</title>
<body>
    <div class="wrapper">
        <div class="header">
            <!-- hier image te zetten JQuery prefereerbaar Sliding !-->
        </div>
        <div class="Header">
            <!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
            <ul class="menu">
                <li>Home</li>
                <li>Over mij</li>
                <li>Mijn diensten</li>
                <li>Contact</li>
            </ul>
        </div>
    </div>
</body>

</html>

解决方案2：

修改.menu和.menu li课程，如下所示：

.menu {
        border: 1px red solid;
        padding: 55px 0;
        position: relative;
        display:inline-block;
        transform: translateX(-50%);
        left: 50%;
        color: black;
        width: 80%;
        text-align: center;   /*Add this property*/
    }

.menu li {
        display: block;
        text-align: center;
    }

见下文：

.wrapper {
    width: 100%;
}
.menudiv {
    width: 80%;
    border: 1px red solid;
    margin: auto;
}
.menu {
    border: 1px red solid;
    padding: 55px 0;
    position: relative;
    display:inline-block;
    transform: translateX(-50%);
    left: 50%;
    color: black;
    width: 80%;
    text-align: center;
}
.menu li {
    display: inline-block;
    text-align: center;
}
.menu li:after {
    content:'/';
    padding-left: 20px;
}

<title>Webdesign Maarten</title>
<body>
    <div class="wrapper">
        <div class="header">
            <!-- hier image te zetten JQuery prefereerbaar Sliding !-->
        </div>
        <div class="Header">
            <!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
            <ul class="menu">
                <li>Home</li>
                <li>Over mij</li>
                <li>Mijn diensten</li>
                <li>Contact</li>
            </ul>
        </div>
    </div>
</body>

</html>

Answer 2

要从最后一个li项目中删除填充，您需要将其作为目标：

.menu li:last-child {
    padding-right: 0;
}

看看你的代码，我无法弄清楚你需要什么。 Html搞砸了。为什么在菜单之前关闭标题div？

Answer 3

更改li以显示内嵌块，定位li的最后一个:last-child：

.menu {
    text-align:center;
    border: 1px red solid;
    padding: 55px 0;
    position: relative;
    display:inline-block;
    transform: translateX(-50%);
    left: 50%;
    color: black;
    width: 80%;
 }

.menu li {
    display:inline-block;
    padding-right: 5%;
}
.menu li:last-child {
    padding-right: none;
}

JSFiddle Demo

Answer 4

这是我能做的最好的事情。我在ul中添加了flexbox样式，并删除了一些填充以使其居中。

小提琴：https://jsfiddle.net/sdzLn5hd/7/

<强> HTML

<title>Webdesign Maarten</title>
<body>
    <div class="wrapper">
        <div class="header">
            <!-- hier image te zetten JQuery prefereerbaar Sliding !-->
        </div>
        <div class="Header">
            <!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
        </div>
        <ul class="menu">
            <li>Home</li>
            <li>Over mij</li>
            <li>Mijn diensten</li>
            <li>Contact</li>
        </ul>
    </div>
</body>

</html>

<强> CSS

.wrapper {
    width: 100%;
}
.menudiv {
    width: 80%;
    border: 1px red solid;
    margin: auto;
}
.menu {
    border: 1px red solid;
    padding: 55px 0;
    position: relative;
    display:flex;
    transform: translateX(-50%);
    left: 50%;
    color: black;
    width: 80%;
}
.menu li {
    margin:auto;
    display: block;
}
.menu li:after {
    content:'/';
    padding-left: 20px;
}

Answer 5

加入你的.menu

.menu { text-align:center; }

.menu li {
    display: inline-block;
    padding-right: 5%;
}

您的float:left将始终将元素发送到最左边。

并在你的css中添加这一行（删除最后一个'/'和填充）

.menu li:last-child:after {
    content: '';
    padding-left: 0px;
}

见这里：https://jsfiddle.net/sdzLn5hd/5/

Answer 6

https://jsfiddle.net/sdzLn5hd/9/这样的事情或许就是你正在寻找的东西

<title>Webdesign Maarten</title>



<body>
    <div class="wrapper">
        <div class="header">
            <!-- hier image te zetten JQuery prefereerbaar Sliding !-->


        <ul class="menu">
            <li>Home</li>
            <li>Over mij</li>
            <li>Mijn diensten</li>
            <li>Contact</li>
        </ul>
             </div>
    </div>
</body>

删除html中的一些不需要的标签

Answer 7

要将文本和内嵌元素居中，块父级应该应用text-align: center。

由于您将此标记为HTML5，因此我想为您提供更加语义化的HTML方法。你试图让它工作时还有很多额外的样式属性，所以到目前为止我重新编写了你的CSS（包括我试着在评论中解释的一些更改）。您可以在下面的代码段中看到我的代码：

* { margin: 0px; padding: 0px; } /* Simple CSS reset */

header { display: block; text-align: center; }

h1,
nav > ul {
    display: inline-block;
    border: 1px red solid;
    padding: 20px 0px;
    width: 80%;
}

nav > ul { border-top: none; }
nav > ul > li { display: inline; }
nav > ul > li:after { content: "/" }
nav > ul > li:last-child:after { content: "" } /* Remove trailing separator */

nav > ul > li > a {
    padding: 15px; /* Padding here is important for touch */
    color: black;
    text-decoration: none;
}
nav > ul > li > a:hover { text-decoration: underline; }

<header>
    <h1>Title</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

菜单不会居中

7 个答案:

JSFiddle Demo