Css 菜单将不居中_Css_Html - Fatal编程技术网

Css 菜单将不居中

css html

Css 菜单将不居中,css,html,Css,Html,我正在尝试使菜单/导航栏水平居中。我不太明白我做错了什么/忘记了什么。也是在我的最后一个李是正确的填充。如何删除它 HTML <div class="wrapper"> <div class="header"></div> <div class="Header"></div> <ul class="menu"> <li>Home</li> <li>Ov

我正在尝试使菜单/导航栏水平居中。我不太明白我做错了什么/忘记了什么。也是在我的最后一个李是正确的填充。如何删除它

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>

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

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

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

看看你的代码，我真的不知道你需要什么。Html都搞砸了。为什么要在菜单之前关闭标题div？

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

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

看看你的代码，我真的不知道你需要什么。Html都搞砸了。为什么要在菜单之前关闭标题div？

更改

li

以显示内联块，使用

：最后一个子项将li
中的最后一个作为目标：
.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;
}

将li
更改为显示内联块，将li
中的最后一个作为：最后一个子项的目标：
.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;
}

这是我能做的最好的了。我在ul中添加了flexbox样式，并删除了一些填充以使其居中
小提琴：
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>

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

这是我能做的最好的了。我在ul中添加了flexbox样式，并删除了一些填充以使其居中
小提琴：
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>

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

把你的菜单放进去
.menu { text-align:center; }

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

您的float:left
将始终将元素发送到最左侧
并在css中添加这一行（删除最后的“/”和填充）
请参见此处：
放入您的.menu
.menu { text-align:center; }

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

您的float:left
将始终将元素发送到最左侧
并在css中添加这一行（删除最后的“/”和填充）
请看这里：
像这样的东西也许正是你想要的
<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>

webdesignmaarten

家
在mij上空
米恩·迪恩斯顿
接触



删除html中一些不需要的标记可能就是您想要的
<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>

webdesignmaarten

家
在mij上空
米恩·迪恩斯顿
接触



删除html中一些不需要的标记
好吧，首先，你确定这就是你的html
代码应该是什么样子吗
<div class="Header">
</div>  
<ul class="menu">
   <li>Home </li>
   <li>Over mij </li>
   <li>Mijn diensten </li>
   <li>Contact </li>
</ul>  


网络设计马丁

家
在mij上空
米恩·迪恩斯顿
接触

首先，你确定你的HTML
代码应该是这样的吗
<div class="Header">
</div>  
<ul class="menu">
   <li>Home </li>
   <li>Over mij </li>
   <li>Mijn diensten </li>
   <li>Contact </li>
</ul>  


网络设计马丁

家
在mij上空
米恩·迪恩斯顿
接触

要使文本和内联元素居中，块父元素应应用文本对齐：居中。

既然您已经将其标记为HTML5，我也想为您的HTML提供一种更具语义的方法。为了让它发挥作用，您还留下了很多额外的样式属性，所以到目前为止，我重新编写了您的CSS（包括我试图在注释中解释的一些更改）。您可以在下面的代码片段中看到我的代码：

*{margin:0px；padding:0px；}/*简单CSS重置*/
标题{显示：块；文本对齐：中心；}
h1，
导航>ul{
显示：内联块；
边框：1px红色实心；
填充：20px 0px；
宽度：80%；
}
nav>ul{边框顶部：无；}
nav>ul>li{显示：内联；}
nav>ul>li:在{content:“/”}之后
nav>ul>li:最后一个子项：{content:}/*之后删除尾部分隔符*/
导航>ul>li>a{
填充：15px；/*此处填充对触摸很重要*/
颜色：黑色；
文字装饰：无；
}
nav>ul>li>a:hover{文本装饰：下划线；}

标题






要使文本和内联元素居中，块父元素应应用文本对齐：居中。

既然您已经将其标记为HTML5，我也想为您的HTML提供一种更具语义的方法。为了让它发挥作用，您还留下了很多额外的样式属性，所以到目前为止，我重新编写了您的CSS（包括我试图在注释中解释的一些更改）。您可以在下面的代码片段中看到我的代码：

*{margin:0px；padding:0px；}/*简单CSS重置*/
标题{显示：块；文本对齐：中心；}
h1，
导航>ul{
显示：内联块；
边框：1px红色实心；
填充：20px 0px；
宽度：80%；
}
nav>ul{边框顶部：无；}
nav>ul>li{显示：内联；}
nav>ul>li:在{content:“/”}之后
nav>ul>li:最后一个子项：{content:}/*之后删除尾部分隔符*/
导航>ul>li>a{
填充：15px；/*此处填充对触摸很重要*/
颜色：黑色；
文字装饰：无；
}
nav>ul>li>a:hover{文本装饰：下划线；}

标题






你好，克里斯汀。事实上，我的HTML到处都是，不知怎么的，我把它从我的代码翻译成了stackoverflow。事实上，我的HTML到处都是，不知怎么的，我把它翻译得很糟糕