Question

HTML代码

<div class="heading"></div>
<hr/>
<div class="menu">
    <nav>
        <a href="#1">Home</a>
        <a href="#3">History</a>
        <a href="#4">Gallery</a>
        <a href="#5">Contacts</a>
    </nav>
</div>
<div class="box">
    <div class="box1">
        <div class="menu1">
            <ul>
                <li><a href="#6">Documents</a></li>
                <li><a href="#7">Projects</a></li>
                <li><a href="#8">Izvunklasni</a></li>
                <li><a href="#9">Postijeniq</a></li>
                <li><a href="#10">Priem</a></li>
                <li><a href="#11">News</a></li>
                <li><a href="#12">Parents</a></li>
                <li><a href="#13">Students</a></li>
                <li><a href="#14">Profile</a></li>
                <li><a href="#15">Film</a></li>
            </ul>
        </div>
    </div>
</div>

CSS代码：

h1 {
    text-align:center;
}
.heading {
    height:136px;
    width:950px;
    border:1px solid black;
    border-radius:5px;
    margin:0 auto;
    display:table;
    background:url("banner5.gif") no-repeat;
    background-color:white;
}
.box {
    height:900px;
    width:950px;
    border:1px solid black;
    border-radius:5px;
    margin:0 auto;
    display:table;
    background-color:#8F8F8F;
}
hr {
    width:600px;
}
body {
    background-color:#CCCCCC;
}
.menu {
    margin:0 auto;
    display:table;
}
.menu1 {
}
a {
    color:white;
    text-decoration:none;
    border:1px solid black;
    border-radius:5px;
    display: block;
    float: left;
    padding: 5px 10px;
}
.box1 {
    margin:15px 15px;
    border:1px solid black;
    border-radius:5px;
    background-color:#999999;
    height:400px;
    width:100px;
}
a:link {
    background-color:grey;
}
a:hover {
    background-color:red;
}
a:active {
    background-color:violet;
}

问题是我的第二个菜单正在浮动。它是“menu1”类中的一个。也有人知道我在CSS中需要关于“menu1”类的一些思考，或者我应该不管它。抱歉这个愚蠢的问题，但我暂时没有练习CSS，因为我正在学习JavaScript和jQuery。怜悯你帮助

Answer 1

虽然不清楚你在寻找什么。但只是看到了设计，我猜你有问题list item已经离开了流程，而不是div当然你需要.menu1课程清除left属性，因为您在float:left代码中使用a。

所以我在这里做的是使用float

清除clear:left

.menu1 {clear:left;}
.menu1 ul{ list-style-type:none;margin:0;padding:0;}

检查 Demo 。

Answer 2

ul li{
    list-style: none;
}
.box {
height:900px;
width:950px;
border:1px solid black;
border-radius:5px;
margin:0 auto;
background-color:#8F8F8F;
}
.box1{
margin:15px 15px;
border:1px solid black;
border-radius:5px;
background-color:#999999;
height:400px;
display: table;
}
.menu1{
padding: 10px;
}

Answer 3

http://fiddle.jshell.net/Q4rRN/6/
http://fiddle.jshell.net/Q4rRN/6/show/

还通过向列表项添加空格来修复一些UX设计问题。

.menu1 ul {
list-style:none;
padding:0;
margin:0;
}

.menu1 ul li {
margin-bottom:5px;
display:block;
}

.menu1 a,
nav a {
color:#fff;
text-decoration:none;
border:1px solid #000;
border-radius:5px;
display:block;
float:left;
padding:5px 10px;
}

.menu1 a {
display:block;
float:none;
}

.box1 {
background-color:#999;
border:1px solid #000;
border-radius:5px;
float:left;
margin:15px;
padding:10px;
}

Answer 4

您是否尝试过简单地重置菜单的列表元素

将此添加到您的css

.menu1 ul {
    padding:0;
    margin:0; 
    list-style-type:none;    
}

显然你可以做更多的造型但这应该解决“浮动”问题

这是一个小提琴http://jsfiddle.net/jby8n/

我的按钮正在离开我的第二个菜单

4 个答案: