我是使用CSS的完整的新手,并且努力了解做事情的正确方法。在线上有很多示例,但是它们似乎都有些不同。我对自己的标记有一些特定的问题。但总的来说这也是正确的方法吗?
我的CSS对我来说是肿的吗?
我的溢出命令导致滚动条,但我不知道为什么
我的顶部菜单左侧有一个较大的填充,我想这与li + li有关,但是我如何摆脱它
我的Divs布局是实现即时尝试的最佳方法吗?使用margin-top 70强制按下第二个菜单对我来说似乎不是最好的方法,是否没有像float bottom或valign bottom这样的东西?
任何使我从右脚开始的指导都将不胜感激。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="logo">
logo
</div>
<div class="top-menu">
<ul>
<li>Lorum</li>
<li>Blog</li>
<li>Contact us</li>
</ul>
</div>
<div class="main-menu">
<ul>
<li>About Us</li>
<li>Countries
<li>Vacancies</li>
<li>About Us</li>
<li>Countries
<li>Vacancies</li>
</ul>
</div>
</div>
</body>
</html>
.wrapper {
background-color: aqua;
width: 600px;
overflow: auto;
padding: 5px;
}
.logo {
background-color: black;
height: 100px;
width: 100px;
float: left;
}
.top-menu {
background-color: blue;
float: right;
line-height: 5px;
}
.top-menu > ul {
line-style: none;
}
.top-menu > ul > li {
display: inline-block;
}
.top-menu li + li:before{
content: " | ";
padding: 0 10px;
}
.main-menu > ul {
line-style: none;
}
.main-menu > ul > li {
display: inline-block;
padding-right: 10px;
}
.wrapper {
background-color: aqua;
width:100%;
overflow: auto;
padding: 5px;
}
.top-menu {
background-color: blue;
float: right;
line-height: 5px;
}
.main-menu {
font-family: arial;
font-szie: 14px;
background-color: crimson;
clear: right;
margin-top: 70px;
height: 30px;
line-height: 30px;
text-align: center;
}
最佳答案
.wrapper类以不同的宽度重复。许多其他类是重复的。
注意代码清理:)
无论如何,主菜单中的ul边缘从div流出,从而创建了滚动条。
如果需要,可以使用浏览器中的inspect元素(例如chrome)找到此问题:https://developer.chrome.com/devtools/docs/dom-and-styles
.logo {
background-color: black;
height: 100px;
width: 100px;
float: left;
}
.wrapper {
background-color: aqua;
width:100%;
overflow: auto;
padding: 5px;
}
.top-menu {
background-color: blue;
float: right;
line-height: 5px;
}
.top-menu::after {
clear: both;
}
.main-menu {
font-family: arial;
font-size: 14px;
background-color: crimson;
clear: right;
margin-top: 70px;
height: 30px;
line-height: 30px;
text-align: center;
}
.top-menu > ul > li {
display: inline-block;
}
.top-menu li + li:before{
content: " | ";
padding: 0 10px;
}
.main-menu > ul {
margin: 0;
}
.main-menu > ul > li {
display: inline-block;
padding-right: 10px;
}
<div class="wrapper">
<div class="logo">
logo
</div>
<div class="top-menu">
<ul>
<li>Lorum</li>
<li>Blog</li>
<li>Contact us</li>
</ul>
</div>
<div class="main-menu">
<ul>
<li>About Us</li>
<li>Countries</li>
<li>Vacancies</li>
<li>About Us</li>
<li>Countries</li>
<li>Vacancies</li>
</ul>
</div>
</div>
http://jsfiddle.net/n3wurcpx/