gpt4 book ai didi

html - 为什么我的图片将我的文字推到标题下方?

转载 作者:太空宇宙 更新时间:2023-11-03 23:06:11 25 4
gpt4 key购买 nike

为什么我的图片将我的文字推到标题下方我不知道为什么,但我的文本(稍后将成为菜单下拉菜单)不会与标题中的图像对齐。我试着让我的标题更长,这使得文本在标题中,但文本仍然不会对齐。如何将标题中的文本与图像对齐,为什么一开始就出现问题?

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>

enter image description here

最佳答案

您的图像 ( #header img ) 和 div在它之后的都是 block 元素——默认情况下, block 元素跨越整个宽度,因此它们将显示在彼此下方。使用 display: inline-blockwidth将 div 并排放置的定义。

评论后编辑/添加:

  • 添加 #menu { margin: 0; }摆脱顶部的空白

  • 取出 <p> <li> 中的标签元素。

  • 使用 margin-top在 `#menu li' 上微调与顶部边框的距离。

另请参阅此代码笔:http://codepen.io/anon/pen/gPWJYO

关于html - 为什么我的图片将我的文字推到标题下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34701264/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com