爲什麼我的圖片將我的文字推到我的標題下方？

爲什麼我的圖片將我的文本壓入我的標題我無法弄清楚爲什麼，但是我的文本（稍後將變爲菜單下拉菜單）將不會與頭部中的圖片對齊。我試圖讓我的標題更長，這使得文本在標題中，但文本仍然不會對齊。如何將文本與標題中的圖像對齊，並且爲什麼首先出現問題？爲什麼我的圖片將我的文字推到我的標題下方？

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #6441a5; 
 
} 
 
#menu li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    text-decoration: none; 
 
    text-align: right; 
 
    color: red; 
 
} 
 
#header img { 
 
    display: block; 
 
    margin: 0; 
 
    text-align: center; 
 
}

<!DOCTYPE HTML> 
 

 
<title>Twitch Support</title> 
 
<link rel="shortcut icon" href="http://www.twitch.tv/favicon.ico"> 
 
<link type="text/css" rel="stylesheet" href="style.css"> 
 

 
<body> 
 
    <div id='header'> 
 
    <img src="http://gamingshogun.com/wp-content/uploads/2013/05/TwitchTV-logo.png" alt="TwitchTV-logo" width="150.8px" height="50px"> 
 
    <div style="margin-left:100px;"> 
 
     <ul id='menu'> 
 
     <li> 
 
      <p>Get Help Now</p> 
 
     </li> 
 
     <li> 
 
      <p>Viruses</p> 
 
     </li> 
 
     <li> 
 
      <p>About</p> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 

 

 

 
</body>

來源

2016-01-10 user3600107

有幾種方法可以做到這一點。將#header img（加上margin-right）和#header ul設置爲內聯顯示並移除UL上的div。例如： '#header img {display：inline;保證金右：100px的; } #menu {display：inline; }' – LiveLongAndProsper

看到這個小提琴：https://jsfiddle.net/f5xwmsyt/ – LiveLongAndProsper

你的圖像（#header img）和附帶後它都是塊元素的div - 默認塊元素跨越整個寬度，所以它們將在下面顯示彼此。使用display: inline-block與width定義將div放在一起。評論後

編輯/添加：

添加#menu { margin: 0; }擺脫白色空間的頂部
拿出你<li>元素<p>標籤。
使用'#menu li'上的margin-top來微調距上邊界的距離。

另見本codepen：http://codepen.io/anon/pen/gPWJYO

來源

2016-01-10 02:16:28 Johannes

我做到了。文字與圖像不符，但它們之間的空間變大了。也許你可以添加更新的代碼，以確保我沒有錯過任何指示。 – user3600107

好的，所以我將代碼更改爲：http://pastebin.com/TnxXuWkp並放大了字體。現在頂部有白色空間，文本不在標題上，請你幫助我。 – user3600107

文本被顯示出來的照片下，因爲內容沒有浮動。

將float: left添加到圖像，float: right添加到菜單，它們應該對齊。

如果你不想讓圖像遠離圖像，你也可以在菜單上使用float: left。

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #6441a5; 
 
} 
 
#menu li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    text-decoration: none; 
 
    text-align: right; 
 
    color: red; 
 
    float: right; 
 
} 
 
#header img { 
 
    display: block; 
 
    margin: 0; 
 
    text-align: center; 
 
    float: left; 
 
}

<!DOCTYPE HTML> 
 

 
<title>Twitch Support</title> 
 
<link rel="shortcut icon" href="http://www.twitch.tv/favicon.ico"> 
 
<link type="text/css" rel="stylesheet" href="style.css"> 
 

 
<body> 
 
    <div id='header'> 
 
    <img src="http://gamingshogun.com/wp-content/uploads/2013/05/TwitchTV-logo.png" alt="TwitchTV-logo" width="150.8px" height="50px"> 
 
    <div style="margin-left:100px;"> 
 
     <ul id='menu'> 
 
     <li> 
 
      <p>Get Help Now</p> 
 
     </li> 
 
     <li> 
 
      <p>Viruses</p> 
 
     </li> 
 
     <li> 
 
      <p>About</p> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 

 

 

 
</body>

來源

2016-01-10 02:23:51 unilogue

使用float：左留在了一個row.Use保證金右它們之間設置空間。

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#menu ul{ 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    text-decoration: none; 
 
    text-align: right; 
 
    color: red; 
 
    float: left; 
 
} 
 
.block-left{ 
 
    display:inline-block; 
 
    float:left; 
 
    height:50px; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #6441a5; 
 
} 
 
#menu li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    text-decoration: none; 
 
    text-align: right; 
 
    color: red; 
 
    float: left; 
 
} 
 
#header img { 
 
    display: block; 
 
    margin: 0; 
 
    text-align: center; 
 
    float: left; 
 
    margin-right:100px; 
 
}

<!DOCTYPE HTML> 
 

 
<title>Twitch Support</title> 
 
<link rel="shortcut icon" href="http://www.twitch.tv/favicon.ico"> 
 
<link type="text/css" rel="stylesheet" href="style.css"> 
 

 
<body> 
 
    <div id='header'> 
 
    <img src="http://gamingshogun.com/wp-content/uploads/2013/05/TwitchTV-logo.png" alt="TwitchTV-logo" width="150.8px" height="50px"> 
 
    <div id='block-right' style=""> 
 
     <ul id='menu'> 
 
     <li> 
 
      <p>Get Help Now</p> 
 
     </li> 
 
     <li> 
 
      <p>Viruses</p> 
 
     </li> 
 
     <li> 
 
      <p>About</p> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 

 

 

 
</body>

來源

2016-01-10 02:59:30

爲什麼我的圖片將我的文字推到我的標題下方？

回答

相關問題