如何将图像放在文本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

如果您要使用徽章的浮动和宽度，请将其用于菜单。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您也可以使用flexbox。也许是这样的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用position: absolute;和图片上的默认设置，如下所示。 （如果需要，您可以使用top和left设置将其移离边框/角落。

这使菜单项相对于容器保持居中。

.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;
}
#image1 {
position: absolute;
}

<div class="container">
<img src="http://placehold.it/80x50/fb4" id="image1">
  <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>