文本显示在图像下而不是内联答案

【问题标题】：Text displays under image instead of inline文本显示在图像下而不是内联
【发布时间】：2020-12-17 18:30:34
【问题描述】：

我试图对图像徽标说“我的网站 bby”，但出于某种原因，它会显示在徽标下方。请帮帮我。这是现在的情况，check the image

这是我的html：

        <div class="branding">
            <div id="logo">
                <img src="./img/logo.png" style="width:100px;" />
            </div>
                <span><h1><u>My</u>&nbsp;Website&nbsp;bby</h1></span>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Photogallery</a></li>
                <li><a href="">Contact me</a></li>
            </ul>
        </nav>
    </div>
</header>

这里是css：

body {
    font-size:20px;
    font-family: Optima, sans-serif;
    line-height:1.5;
    padding: 0;
    margin:0;
}

.container {
    width:80%;
    overflow:hidden;
}


header {
    font-family: Monaco, sans-serif;
    color:white;
    padding-top:100px;
    min-width: 90%;
    min-height: 200px;
    margin: 0;
    padding: 10px;
    background:#6BD326;
}

#logo {
    float:left;
    display:inline-block;
}

.branding {
    float: left;
}

nav li {
    float:left;
    padding: 0px 20px;
    list-style-type: none;
}

nav {
    float:right;
}

#logo {
    margin-top:5px; 
    width:40%;
}

为了更好地理解我在说什么，请查看上图。我刚开始写代码，真的需要了解问题所在。

【问题讨论】：

标签： html css

【解决方案1】：

您还可以使用display: inline-block 和vertical-align: middle 的组合。

例如：

body {
  font-size: 20px;
  font-family: Optima, sans-serif;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

.container {
  width: 80%;
  overflow: hidden;
}


header {
  font-family: Monaco, sans-serif;
  color: white;
  padding-top: 100px;
  min-width: 90%;
  min-height: 200px;
  margin: 0;
  padding: 10px;
  background: #6BD326;
}

#logo {
  float: left;
    display: inline-block;
    vertical-align: top;
}

.i-b {
  display: inline-block;
    vertical-align: top;
    width: calc(100% - 40%);
}

.branding {
  float: left;
}

nav li {
  float: left;
  padding: 0px 20px;
  list-style-type: none;
}

nav {
  float: right;
}

#logo {
  margin-top: 5px;
  width: 40%;
}

<div class="branding">
            <div id="logo">
                <img src="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" style="width:100px;" />
            </div>
                <span class="i-b"><h1><u>My</u>&nbsp;Website&nbsp;bby</h1></span>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Photogallery</a></li>
                <li><a href="">Contact me</a></li>
            </ul>
        </nav>
    </div>

Jsfiddle code

【讨论】：

【解决方案2】：

检查一下，我删除了所有的浮动并使用了 flex

body {
    font-size:20px;
    font-family: Optima, sans-serif;
    line-height:1.5;
    padding: 0;
    margin:0;
}

.container {
    width:80%;
    overflow:hidden;
}


header {
    font-family: Monaco, sans-serif;
    color:white;
    padding-top:100px;
    min-width: 90%;
    margin: 0;
    padding: 10px;
    background:#6BD326;
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
}

#logo {    
    margin-top: 5px;
    display: flex;
    align-items: center;
}
#logo span{
  margin-left: 10px;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  
}
nav li {
    padding: 0px 20px;
    list-style-type: none;
}

<header>        
<div class="branding">
            <div id="logo">
                <img src="https://cdn.mos.cms.futurecdn.net/BVb3Wzn9orDR8mwVnhrSyd-1200-80.jpg" style="width:100px;" />
                <span><u>My</u>&nbsp;Website&nbsp;bby</span>
            </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Photogallery</a></li>
                <li><a href="">Contact me</a></li>
            </ul>
        </nav>
    </div>
</header>

【讨论】：

【解决方案3】：

这是你的工作代码

这样的身体：

 <body>
<div class="branding">

    <div id="logo">
        <img src="./img/logo.png" style="width:100px;" />
    </div>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">Photogallery</a></li>
            <li><a href="">Contact me</a></li>
        </ul>
    </nav>
        <span><h1 style="padding: 30px; margin-left:130px;"><u>My</u>&nbsp;Website&nbsp;bby</h1></span>
</div>

</div>
</body>

你的 CSS 应该是这样的：

body {
    font-size:20px;
    font-family: Optima, sans-serif;
    line-height:1.5;
    padding: 0;
    margin:0;
}
.body img{
    display: inline;
}

.container {
    width:80%;
    overflow:hidden;
}


header {
    font-family: Monaco, sans-serif;
    color:white;
    padding-top:100px;
    min-width: 90%;
    min-height: 200px;
    margin: 0;
    padding: 10px;
    background:#6BD326;
}

#logo {
    float:left;
    display:inline-block;
}



nav li {
    float:left;
    padding: 0px 20px;
    list-style-type: none;
}

你的错误就在这里

.branding {
    float: left;
}

【讨论】：

【解决方案4】：

在<div class="branding"> 中，您可以添加另一个div 的样式：

display: flex; justify-content: space-between

【讨论】：

【解决方案5】：

请通过 W3C 验证器运行您的代码。

您会看到 HTML 中有错误：

错误：在此上下文中不允许元素 h1 作为元素 span 的子级。（抑制来自该子树的更多错误。）

您可以在Can <span> tags have any type of tags inside them? 找到有关块元素和内联元素之间区别的更多信息，这反过来又引用了https://www.w3.org/TR/html401/struct/global.html#h-7.5.3 的正式规范

对于您当前的问题，您可以将 span 设为 div（可以将 h1 元素作为子元素）并将其和图像内联块。

【讨论】：

【解决方案6】：

尝试使用 flex 并删除 float:left

.branding {
    display:flex;
    align-items:center;
}

【讨论】：