Li元素溢出我的导航栏（html）_Html_Css

Li元素溢出我的导航栏（html）

html css

Li元素溢出我的导航栏（html）,html,css,Html,Css,我对HTML/CSS有点陌生，在导航栏中创建正确定位的元素时遇到了一些问题我的li元素溢出了酒吧这是我的代码： HTML 如何使按钮停留在导航栏内并自动展开？我浏览了很多类似的帖子，并尝试了一些方法，但是我不能完全让它工作。原因是您必须指定溢出属性这里您必须指定溢出：auto带高度：自动（可选，即使未指定，也是默认值） CSS .navbar { background-color: #99CCFF; border:3px solid green; display

我对HTML/CSS有点陌生，在导航栏中创建正确定位的元素时遇到了一些问题

我的

li

元素溢出了酒吧

这是我的代码：

HTML

如何使按钮停留在导航栏内并自动展开？

我浏览了很多类似的帖子，并尝试了一些方法，但是我不能完全让它工作。

原因是您必须指定溢出属性

这里您必须指定

溢出：auto带<代码>高度：自动（可选，即使未指定，也是默认值）
CSS
.navbar {
    background-color: #99CCFF;
    border:3px solid green;
    display:block;
    height:auto /* Not mandatory as is default if not specifed */ 
    overflow:auto;
}

原因是您必须指定溢出属性
这里您必须指定溢出：auto带<代码>高度：自动（可选，即使未指定，也是默认值）
CSS
.navbar {
    background-color: #99CCFF;
    border:3px solid green;
    display:block;
    height:auto /* Not mandatory as is default if not specifed */ 
    overflow:auto;
}

Html文件是这样的吗




这是什么
.身体{
边框：纯红3px；
保证金：0px
}
navbar先生{
背景色：#99CCFF；
边框：3倍纯绿；
显示：块；
/*高度：25px*/
}
纳瓦尔先生{
显示：内联；
字体系列：Arial；
}
navbar ul li先生{
颜色：白色；
显示：内联块；
边框：纯黑1px；
余量：-6px 10px 0px 10px；
填充物：5px；
背景色：#0099FF；
文本转换：大写；
过渡：背景色0.5s；
}
.navbar ul li:悬停{
背景色：黑色；
}
navbar ul li a.先生{
文字装饰：无；
显示：块；
}
琼伯伦先生{
背景图像：url（'http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
高度：600px；
}
.向左拉{
浮动：左；
左侧填充：10px；
}
.向右拉{
浮动：对；
右边填充：10px；
}
.clearTheals{clear:tweals；}
Html文件是这样的吗




这是什么
.身体{
边框：纯红3px；
保证金：0px
}
navbar先生{
背景色：#99CCFF；
边框：3倍纯绿；
显示：块；
/*高度：25px*/
}
纳瓦尔先生{
显示：内联；
字体系列：Arial；
}
navbar ul li先生{
颜色：白色；
显示：内联块；
边框：纯黑1px；
余量：-6px 10px 0px 10px；
填充物：5px；
背景色：#0099FF；
文本转换：大写；
过渡：背景色0.5s；
}
.navbar ul li:悬停{
背景色：黑色；
}
navbar ul li a.先生{
文字装饰：无；
显示：块；
}
琼伯伦先生{
背景图像：url（'http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
高度：600px；
}
.向左拉{
浮动：左；
左侧填充：10px；
}
.向右拉{
浮动：对；
右边填充：10px；
}
.clearTheals{clear:tweals；}
First things类导航条的第一个高度是25px，所以它是强制性的吗？@divy3993忘了再次删除它，我明白了。我只是想手动调整，但我希望它是自动完成的。所以没有必要吧？我想下面的答案就是你们想要的。是的，非常感谢：）第一件事，类导航栏的第一个高度是25px，所以它是强制性的吗？@divy3993忘了再次删除它，我明白了。我只是试着手动调整，但我希望它是自动完成的。所以没有必要吧？我想下面的答案就是你们想要的。是的，非常感谢：）非常感谢。我曾经尝试过溢出，但可能是放错了。非常感谢。我曾经尝试过溢出，但可能是放错了。在html文件中我提到了这个，css文件中我对它进行了更改。navbar{background color:#99CCFF；border:3px solid green；display:block；/*height:25px；*/}。clearBoth{clear:both；}在html文件中我提到了这个，css文件中我对.navbar进行了更改{背景色：#99CCFF；边框：3px纯绿色；显示：块；/*高度：25px；*/}.clearBoth{clear:both；}
.navbar {
    background-color: #99CCFF;
    border:3px solid green;
    display:block;
    height:auto /* Not mandatory as is default if not specifed */ 
    overflow:auto;
}

Html file is this

<body class="body">

    <div class="navbar">
    <ul class="pull-left">
        <a href="#home"><li>Home</li></a>
        <a href="#news"><li>News</li></a>
        <a href="#about"><li>About</li></a>
    </ul>

    <ul class="pull-right">
        <a href="#login"><li>Login</li></a>
        <a href="#signup"><li>Sign Up</li></a>
        <a href="#support"><li>Support</li></a>
    </ul>
    <div class="clearBoth"></div>
</div>

<div class="jumbotron">

</div>

</body>

Css is this

.body {
    border: solid red 3px;
    margin: 0px
}

.navbar {
    background-color: #99CCFF;
    border:3px solid green;
    display:block;
    /*height:25px;*/
}

.navbar ul{
    display:inline;
    font-family: Arial;
}

.navbar ul li{
    color:white;
    display:inline-block;
    border: solid black 1px;
    margin: -6px 10px 0px 10px;
    padding: 5px;
    background-color: #0099FF;
    text-transform: uppercase;
    transition: background-color 0.5s;
}

.navbar ul li:hover{
    background-color: black;
}

.navbar ul li a{
    text-decoration:none;
    display: block;
}

.jumbotron {
    background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
    height: 600px;
}

.pull-left {
    float:left;
    padding-left: 10px;
}

.pull-right {
    float:right;
    padding-right: 10px;
}
.clearBoth{clear: both;}