CSS格式问题-网页设计的新知识

Question

我关注了各种在线教程(codeacademy、一些阅读、dash)，并认为我终于掌握了一些东西。

我已经制作了几个不同风格的网页，没有后端功能，但我只是在谈论前端的东西。

我总是遇到奇怪的问题，关于在页面上放置东西，我真的不确定我错在哪里了。我知道你不能一概而论地回答我哪里错了，因为很明显，每个案例都会不同。

基本上，我似乎不能以我想要的方式来操纵菜单部分……我希望所有菜单项都是相邻的，并且与ul的背景颜色略有不同。由于某些原因，当我试图将李氏作为不同的颜色时，背景颜色一直在移动。现在我有了一个颜色的整个东西，我不能改变李的边缘，使它们彼此更接近。

眼下我对这一切感到相当紧张，因为看起来简单的事情很难做，所以我一定是在某个地方犯了一个大错误。还有没有人可以推荐的其他教程？

但是在这个特定的案例中，我做错了什么呢？这是我安排HTML的方式吗？CSS？如果我做错了什么，请指出，因为我不想一直练习错误的东西。

​

.banner .container{
background: #1D2926;
width: cover;
height: 50px;
margin: -10px -30px 0 -20px;
}

.banner .strip {
background: #E3C109;
height: 5px;
width: cover;
margin: 0px -30px 0px -20px;
}

body {
text-align: center;
}

.logo {
font: ;
color: #000;
background: url("");
margin-top: 150px;
margin-bottom: 80px;
height: 20px;
}

h1 {
font-size: 60px;
font-family: 'Niconne', cursive;
}

ul {
background: rgba(0, 0, 0, 0.1);
padding: 2px 0 2px 0;
}

li {
margin-left: 0 -2px 0 -2px;
display: inline;
font-size: 25px;
padding: 0 20px 0 20px;
font-family: 'Londrina Solid', cursive;
border: 1px solid #d3c5ba;
}

<div class="banner">
	<div class="container">
		&nbsp;
		&nbsp;
		&nbsp;
	</div>
	<div class="strip">
		&nbsp;
	</div>
</div>

<div class="logo">
	<h1>Name of business</h1>
</div>

<div class="menu">
	<div class="container">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Food</a></li>
			<li><a href="#">Drink</a></li>
			<li><a href="#">Events</a></li>
			<li><a href="#">Pennine Trail</a> </li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</div>

​

Answer 1

您的标记看起来很好，学习HTML/CSS的最好方法之一就是反复试验。

我看到的第一个问题是，为什么li上的页边距不能响应您的更改，因为您在左页边距样式上错误地定义了样式：

margin-left: 0 -2px 0 -2px;

它应该是：

margin-left: -2px;
margin-right: -2px;

或

margin: 0 -2px 0 -2px;

Answer 2

我已经做了一些css更改，以实现您在问题中提到的内容。如果你想要这个，请勾选一次。

.banner .container{
background: #1D2926;
width: cover;
height: 50px;
margin: -10px -30px 0 -20px;
}

.banner .strip {
background: #E3C109;
height: 5px;
width: cover;
margin: 0px -30px 0px -20px;
}

body {
text-align: center;
}

.logo {
font: 2em;
color: #000;
background: url("");
margin-bottom: 0px;
}

h1 {
font-size: 60px;
font-family: 'Niconne', cursive;
}

ul {
background: rgba(0, 0, 0, 0.1);
padding: 2px 0 2px 0;
}

li {
margin-left: 0 -2px 0 -2px;
display: inline;
font-size: 100%;
padding: 0 3% 0 3%;
font-family: 'Londrina Solid', cursive;
border: 1px solid #d3c5ba;
  background: red;
}

Answer 3

将overflow: hidden和width: 100%添加到ul

ul {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 0 2px 0;
    width: 100%;
    overflow: hidden;
} 

将float: left和width: 16.5%添加到li's

li {
    display: inline-block;
    font-size: 25px;
    font-family:'Londrina Solid', cursive;
    border: 1px solid #d3c5ba;
    width: 16.5%;
    float: left;
}

我如何得到16.5%的宽度是100/6。6是页面上的链接数量，100是父链接的宽度。所以，如果你添加了更多的链接或者去掉了一些链接，只要做100除以链接的数量即可。