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

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

这是我的密码：

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

这是tweet文本

演示--

---

非常感谢您的帮助。

请使用

display:inline block

而不是

display:inline

。您的css应该是：

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

如果有一个内联元素后跟一个块级元素，那么后面的元素将从新行开始。使它们都

内联块

保持在一行中

。最新推文ul li:之前{
内容：url（“https://s27.postimg.org/419bicyab/home_tweeter_icon.jpg");
显示：内联块；
垂直对齐：顶部；
}
.最新推文ulli{
背景：无；
列表样式：无；
}
.最新推文ul li p{
显示：内联块；
垂直对齐：顶部；
最大宽度：85%；
}

这是tweet文本

使用

显示：内联块

而不是

显示：内联

。您的css应该是：

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

如果有一个内联元素后跟一个块级元素，那么后面的元素将从新行开始。使它们都

内联块

保持在一行中

。最新推文ul li:之前{
内容：url（“https://s27.postimg.org/419bicyab/home_tweeter_icon.jpg");
显示：内联块；
垂直对齐：顶部；
}
.最新推文ulli{
背景：无；
列表样式：无；
}
.最新推文ul li p{
显示：内联块；
垂直对齐：顶部；
最大宽度：85%；
}

这是tweet文本

。最新推文ul li:之前{
内容：url（“https://s27.postimg.org/419bicyab/home_tweeter_icon.jpg");
显示：内联块；
浮动：左；
}
.最新推文ulli{
背景：无；
列表样式：无；
}

这是tweet文本

。最新推文ul li:之前{
内容：url（“https://s27.postimg.org/419bicyab/home_tweeter_icon.jpg");
显示：内联块；
浮动：左；
}
.最新推文ulli{
背景：无；
列表样式：无；
}

这是tweet文本

显示：与
浮点一起使用时，内联块
过多
float
属性使元素成为块级元素，因此在这里使用
display:inline block
没有意义。如果删除此属性，代码将以相同的方式工作。
display:inline block
在与
float
一起使用时过量
float
属性使元素成为块级元素，因此在这里使用
display:inline block
没有意义。如果要删除此属性，您的代码将以相同的方式工作。非常感谢mate的帮助。非常感谢mate的帮助。