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

Question

I've followed various online tutorials (codeacademy, some reading, dash), and thought I was finally getting to grips with things.

I've made a couple of web pages of different styles, no backend functionality yet I'm talking about just the front end stuff.

I keep running into strange problems with regards to positioning things on the page and I'm really not sure where it is I'm going wrong. I know you cant answer in general where I'm going wrong as obviously each case will differ.

Basically I cant seem to manipulate the menu section in the way I want...I wanted the menu items to all be next to each other, and have a slightly different colour to the background of the ul. For some reason the background colour kept moving when I tried to have the li's as a different colour. Now that I have the whole thing as one colour, I cant change the margin of the li's to move them closer to each other.

Getting rather stressed with all this at the moment as it seems like easy things are very difficult so I must be making a major error somewhere. Are there any other tutorials anyone can suggest?

But in this specific case, what am I doing wrong? Is it the way I have arranged the HTML? The CSS? If I'm doing something majorly wrong then please point it out as I don't want to keep practicing the wrong thing.

 .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

Your markup looks fine, one of the best ways of learning HTML/CSS is trial and error.

The first issue I see on why your margin's on the li are not responding to your changes is because, you have your styles defined incorrectly on the margin-left style:

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

It should be either:

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

or

margin: 0 -2px 0 -2px;

Answer 2

I have made some css changes to achieve whatever you had mentioned in your question. Check once if you wanted to have this.

.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

CODEPEN

Add overflow: hidden and width: 100% to the ul

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

Add float: left and width: 16.5% to the li's

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

How I got the width of 16.5% is 100/6 . 6 is the number of links that you have on page and 100 is the width of the parent. So, if you add more or get rid of some links just do 100 divided by the number of links.