Question

我正在尝试使用css将图像和文本保持在同一行。

这是我的代码：

<div class="latest-tweets">
  <ul>
    <li>
      <p class="tweet-text">This is tweet Text</p>
    </li>
  </ul>
</div>

演示 - https://jsfiddle.net/Lwhnunad/1/

非常感谢任何帮助。

Answer 1

使用display: inline-block代替display: inline。你的CSS应该是：

.latest-tweets ul li p,
.latest-tweets ul li:before {
  display: inline-block;
  vertical-align: top;
}

如果您有一个内联元素后跟一个块级元素，那么稍后将从一个新行开始。让它们inline-block保持一行。

.latest-tweets ul li:before {
  content: url("https://s27.postimg.org/419bicyab/home_tweeter_icon.jpg");
  display: inline-block;
  vertical-align: top;
}

.latest-tweets ul li {
  background: none;
  list-style:none;
}

.latest-tweets ul li p {
  display: inline-block;
  vertical-align: top;
  max-width: 85%;
}

<div class="latest-tweets">
  <ul>
    <li>
      <p class="tweet-text">This is tweet Text</p>
    </li>
  </ul>
</div>

注意：在max-width上使用一些p，以便在添加大量文字时不会丢失。

Answer 2

＆＃13;

.latest-tweets ul li:before {
  content: url("https://s27.postimg.org/419bicyab/home_tweeter_icon.jpg");
  display: inline-block;
  float:left;



}

.latest-tweets ul li {

  background: none;
  list-style:none;
}

＆＃13;

<div class="latest-tweets">
  <ul>
    <li>
      <p class="tweet-text">This is tweet Text</p>
    </li>
  </ul>
</div>

＆＃13;

ul li之前的图像与文本对齐

2 个答案: