Question

我对HTML / CSS有点新，我在导航栏中创建正确的定位元素时遇到了一些麻烦。

我的li元素溢出了标题。

这是我的代码atm：

HTML

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

<div class="jumbotron">

</div>

CSS

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

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

.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;
}

JSFIDDLE

如何让我的按钮留在导航栏内并自动展开？我浏览了很多类似的帖子并尝试了几件事，但是我无法让它发挥作用。

Answer 1

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

在此您必须使用overflow:auto;指定height:auto;（即使未指定，也可选，因为它是默认值）

<强> CSS

.navbar {
    background-color: #99CCFF;
    border:3px solid green;
    display:block;
    height:auto /* Not mandatory as is default if not specifed */ 
    overflow:auto;
}

Fiddle

Answer 2

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

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

2 个答案: