如何仅使用CSS和HTML设置响应导航栏菜单的中心？_Html_Css

如何仅使用CSS和HTML设置响应导航栏菜单的中心？

html css

如何仅使用CSS和HTML设置响应导航栏菜单的中心？,html,css,Html,Css,我正在着手创建响应性设计，所以我想制作一个响应性菜单。我在网上找到一个只使用CSS和HTML（没有JavaScript或引导）的，我正在根据自己的喜好调整它。但是我在尝试将正常属性应用于元素时遇到了很多问题。我有一个背景div，用于使导航条在屏幕上100%移动（因为我得到的原始div在屏幕上只移动了25%），我还创建了一个容器div，以便将菜单放入其中。然而，当我尝试将菜单本身居中时，我要么在响应菜单中出现错误（当您缩小浏览器窗口时会出现错误），要么在页面上的元素上出现许多其他不正常的情况。这是

我正在着手创建响应性设计，所以我想制作一个响应性菜单。我在网上找到一个只使用CSS和HTML（没有JavaScript或引导）的，我正在根据自己的喜好调整它。但是我在尝试将正常属性应用于元素时遇到了很多问题。我有一个背景div，用于使导航条在屏幕上100%移动（因为我得到的原始div在屏幕上只移动了25%），我还创建了一个容器div，以便将菜单放入其中。然而，当我尝试将菜单本身居中时，我要么在响应菜单中出现错误（当您缩小浏览器窗口时会出现错误），要么在页面上的元素上出现许多其他不正常的情况。这是我现在正在使用的代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

<style>
body {
margin: 0;
}

#menuBackground {
background: #2f3036;
width: 100%;
height: 50px;
}


/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}

/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}

/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
background: #19c589;
}

/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
display: none;
}

/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}

/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 16px 0;
display: none;
width: 100% !important;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
    margin: 0 auto;
}


/*Responsive Styles*/

@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
    position: static;
    display: none;
}    

/*Create vertical spacing*/
li {
    margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
    width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
    display:block;
    }
}

</style>


</head>
<body>
<div id="menuBackground">
    <div id="menuContainer">
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
            <ul id="menu">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">About ￬</a>
                <ul class="hidden">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">What We Do</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Portfolio ￬</a>
                    <ul class="hidden">
                        <li><a href="#">Photography</a></li>
                        <li><a href="#">Web & User Interface Design</a></li>
                        <li><a href="#">Illustration</a></li>
                    </ul>
                </li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
    </div>
 </div>
 </body>
 </html>


仅CSS导航菜单
身体{
保证金：0；
}
#菜单背景{
背景:#2f3036；
宽度：100%；
高度：50px；
}
/*去除ul的填充并列出样式*/
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
位置：绝对位置；
}
/*创建具有间距的水平列表*/
李{
显示：内联块；
浮动：左；
右边距：1px；
}
/*菜单链接的样式*/
李阿{
显示：块；
最小宽度：140px；
高度：50px；
文本对齐：居中；
线高：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#fff；
背景:#2f3036；
文字装饰：无；
}
/*顶级链接的悬停状态*/
李：停一停{
背景：19c589；
}
/*下拉链接的样式*/
李：悬停一下{
背景:#f3；
颜色：#2f3036；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
li:悬停ul a:悬停{
背景：19c589；
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们*/
李乌尔{
显示：无；
}
/*使下拉链接垂直*/
李宇莉{
显示：块；
浮动：无；
}
/*防止文本换行*/
李宇莉{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
/*悬停时显示下拉列表*/
ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
/*默认情况下，设置“显示菜单”标签按钮的样式并将其隐藏*/
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：16px0；
显示：无；
宽度：100%！重要；
}
/*隐藏复选框*/
输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{
显示：块；
保证金：0自动；
}
/*反应型风格*/
@媒体屏幕和屏幕（最大宽度：760像素）{
/*使下拉链接内联显示*/
保险商实验室{
位置：静态；
显示：无；
}    
/*创建垂直间距*/
李{
边缘底部：1px；
}
/*使所有菜单链接全宽*/
ul li，li a{
宽度：100%；
}
/*显示“显示菜单”链接*/
.显示菜单{
显示：块；
}
}
显示菜单

我摆脱了可怕的浮动，修复了您的定位问题，并将菜单居中

（）

我摆脱了可怕的浮动，修复了你的定位问题，并将菜单居中

（）

这真是太有用了。通过查看这些代码，我学到了很多。非常感谢。这真是太有用了。通过查看这些代码，我学到了很多。非常感谢你。

body {
    margin:0
}

#menuBackground {
    background:#2f3036;
    width:100%;
    height:50px;
    text-align: center;
}
#menuContainer {
    text-align: center;
}
/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    vertical-align: top;
    margin-right:1px;
}

/*Style for menu links*/
li a {
    display:block;
    min-width:140px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#fff;
    background:#2f3036;
    text-decoration:none;
    font-size: 1rem;
}

/*Hover state for top level links*/
li:hover a {
    background:#19c589
}

/*Style for dropdown links*/
li:hover ul a {
    background:#f3f3f3;
    color:#2f3036;
    height:40px;
    line-height:40px
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background:#19c589;
    color:#fff
}

/*Hide dropdown links until they are needed*/
li ul {
    position: absolute;
    display:none
}

/*Make dropdown links vertical*/
li ul li {
    display:block;
}

/*Prevent text wrapping*/
li ul li a {
    width:auto;
    min-width:100px;
    padding:0 20px
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden,.hidden:hover {
    display:block
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-decoration:none;
    color:#fff;
    background:#19c589;
    text-align:center;
    padding:16px 0;
    display:none;
    width:100%!important
}

/*Hide checkbox*/
input[type=checkbox] {
    display:none
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
    display:block;
    margin:0 auto
}

/*Responsive Styles*/
@media screen and (max-width : 760px) {
    /*Make dropdown links appear inline*/
    ul {
        position:static;
        display:none;
        white-space: initial;
    }

    /*Create vertical spacing*/
    li {
        margin-bottom:1px
    }

    /*Make all menu links full width*/
    ul li,li a {
        width:100%
    }

    /*Display 'show menu' link*/
    .show-menu {
        display:block
    }
}