Question

为什么我的图片会将我的文字推到我的标题下面我无法找出原因，但我的文本（稍后将成为菜单下拉菜单）将不会与标题中的图像对齐。我尝试使我的标题更长，这使得文本在标题中，但文本仍然不会对齐。如何将文本与标题中的图像对齐？为什么首先出现问题？

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您的图片（#header img）和之后的div都是块元素 - 默认情况下，块元素跨越整个宽度，因此它们将显示在彼此下方。使用display: inline-block和width定义将div放在一起。

评论后编辑/添加：

添加#menu { margin: 0; }以消除顶部的空白
取出<p>元素中的<li>代码。
在'#menu li＆＃39;上使用margin-top微调与顶部边界的距离。

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

Answer 2

文字显示在照片下面，因为元素没有浮动。

将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>

Answer 3

使用float：left将它们留在一行中。使用margin-right来设置它们之间的空间。

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>

为什么我的图像将我的文字推到标题下方？

3 个答案: