html - 如何将图像放在文本 CSS 旁边

Question

我想在文本的左侧放置一个图像，并根据窗口的分辨率保持原样。

这是没有图像的样子:http://prntscr.com/fmky4f

这是我希望它放置后的样子。 https://prnt.sc/fmkk0a

这是我的代码:

.xd {
  font-size: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.xd li {
  display: inline;
}

.xd a {
  display: inline-block;
  padding: 5px;
  color: #080808;
}

.logo {
  width: 10%;
  height: auto;
  float: left;
}

<div class="container">
  <div id="container-fluid">
    <ul class="xd">
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About Us</a>
      </li>
      <li>
        <a href="news.html">News</a>
      </li>
      <li>
        <a href="gallery.html">Gallery</a>
      </li>
      <li>
        <a href="map.html">Map</a>
      </li>
      <li>
        <a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </div>

现在我试着简单地放入带有 .logo 类属性的图像，但它们似乎没有按预期完成工作。

Answer 1

如果您要为 Logo 使用 float 和宽度，也请将其用于菜单。

.xd {
  float: left;
  width: 90%;
  font-size: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.xd li {
  display: inline;
}

.xd a {
  display: inline-block;
  padding: 5px;
  color: #080808;
}

.logo {
  width: 10%;
  height: auto;
  float: left;
}

<div class="container">
  <div id="container-fluid">
      <img class="logo" src="http://placehold.it/50x50">
    <ul class="xd">
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About Us</a>
      </li>
      <li>
        <a href="news.html">News</a>
      </li>
      <li>
        <a href="gallery.html">Gallery</a>
      </li>
      <li>
        <a href="map.html">Map</a>
      </li>
      <li>
        <a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </div>

你也可以使用flexbox。也许是这样的:

header,
ul {
  display: flex;
}

header img {
  display: block;
  max-width: 100%;
  height: auto;
}

header ul {
  flex-grow: 1;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
}

header a {
  padding: 5px;
  color: #080808;
}

<header>
  <div>
    <img src="http://placehold.it/50x50">
  </div>
  <ul>
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="about.html">About Us</a>
    </li>
    <li>
      <a href="news.html">News</a>
    </li>
    <li>
      <a href="gallery.html">Gallery</a>
    </li>
    <li>
      <a href="map.html">Map</a>
    </li>
    <li>
      <a href="contact.html">Contact Us</a>
    </li>
  </ul>
</header>