div中的元素不在同一垂直對齊中
[英]elements not in same vertical alignment in div
問題描述
所以我剛剛下載了Brackets編輯器，因為我今天聽說過它並且我真的非常喜歡它...但是當我開始嘲笑一些基本的東西時，我遇到了一些我似乎可以修復的東西。
我在頂部有一個基本菜單，包含div標簽，一個用於隨機人的名字（來自忍者外傳的人）和一個列表。 它們都是div標簽，也稱為標頭。最后我會添加一些javascript和特效等。但是有一件似乎不起作用的是div標簽中名稱和列表的對齊方式，列表低於名稱...
有沒有更好的方法來嘲弄像css那樣基本的東西，或者也許我的理解在這里有點故障。
簡單的html設置是：
<!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>
簡單的css代碼是：
#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;
}
有沒有一種很好的方法來調整它們，或者對這樣的事情進行快速討論/建議......所以這就是嘗試編輯所轉變的。
2 個解決方案
解決方案1
1 已采納 2013-12-06 00:07:55
您的<ul>列表似乎有默認保證金。
我建議將其添加到您的CSS：
.menu {
margin:0;
}
如果希望列表相對於標題垂直居中，則可以使用列表的line-height CSS定義。
解決方案2
1 2013-12-06 00:14:49
我通常在每個網站規划/創建的開始時做的是將以下內容添加到我的CSS代碼的頂部： * { padding:0; margin:0; border:0; } * { padding:0; margin:0; border:0; } * { padding:0; margin:0; border:0; } 。 這就像“重置”一樣， 迫使瀏覽器不會為邊距和邊框構成奇怪的默認值。
我剛做了一個快速測試，似乎運行良好。
通過微調和跨瀏覽器兼容性，這可以提供很多幫助，至少這是我所經歷的。 另外，也許你應該給“name” <div>和<ul>一個高度。 我希望這有幫助！
Div中的垂直/水平對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.