elements not in same vertical alignment in div
Question
So I have just downloaded Brackets editor because I heard about it today and I am really enjoying it...but as I started mocking something basic stuff up I came across something which I can seem to fix.
I have a basic menu at the top containing to div tags, one for the name of a random person (the guy from ninja gaiden lol) and one for a list. They are both in a div tag as well called masthead..eventually I will add some javascript and effects etc..but one thing that doesn't really seem to work is the alignment for the name and the list in the div tag, the list is lower than the name...
is there a better way of mocking something basic like that up in css, or perhaps my understanding is a little faulted here.
the simple html setup is:
<!DOCTYPE html>
<head>
<title>first page</title>
<link rel="stylesheet" href="menu_one.css" type="text/css" />
</head>
<body>
<div id="masthead">
<div id="name">Ryu Hyabusa</div>
<ul class="menu">
<li>item one</li>
<li>item two</li>
<li>item three</li>
<li>item four</li>
</ul>
</div>
<div id="content">
<p>there is some content here</p>
</div>
</body>
The simple css code is:
#masthead {
position: fixed;
background-color: yellow;
width: 98%;
}
#name {
font-weight: bold;
font-size: 24px;
float: left;
}
.menu {
}
.menu li {
list-style-type: none;
display: inline;
padding-left: 20px;
float: right;
}
#content {
padding-top: 50px;
text-align: center;
}
is there a good way to align them, or perhaps have a quick discussion/advice on good practice for things like that...so this is what trying an editor turns into.
2 answers
solution1
1 ACCPTED 2013-12-06 00:07:55
Your <ul> list appears to have a default margin.
I suggest adding this to your CSS:
.menu {
margin:0;
}
If you want the list to be centered vertically relative to the title, you can play with the list's line-height CSS definition.
solution2
1 2013-12-06 00:14:49
What I usually do at the very beginning of each website planning/creation, is add the following to the top of my CSS code: * { padding:0; margin:0; border:0; } * { padding:0; margin:0; border:0; } * { padding:0; margin:0; border:0; } . It's a like "reset", forcing the browsers to not make up weird default values for margins and borders.
I just did a quick test, and it seems to be working well.
This can help a lot with fine tuning and cross-browser compatibility, at least it's what I have experienced. Also, maybe you should give the "name" <div> and the <ul> a height. I hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.