时间戳

首页 > 解决方案 > 文本显示在图像下而不是内联

html - 文本显示在图像下而不是内联

问题描述

我正在尝试对图像徽标说“我的网站 bby”，但由于某种原因，它会显示在徽标下方。请帮帮我。这是现在的样子，检查图像

这是我的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%;
}

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

标签： htmlcss

解决方案

看看这个我删除了所有的浮动并使用了 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>

推荐阅读