左对齐图像打破 ul 块

Question

将 image(400x100) 左对齐会打断 ul 块：有些项目在右侧图片，一些项目在图片下方。如何让 ul 块保持在一起？即所有项目都在图像的右侧。该图像还与 ul 块重叠。

<img src="url" align="left">

<div>
  <ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>
</div>

Answer 1

只需将 display: inline-block; 添加到您的 <ul>。这会将 <ul> 设置为与图像显示在同一行，从而将它们保持在一起，如下所示：

img {
  width: 400px;
  height: 100px;
}
ul {
  display: inline-block;
}

<img src="url" align="left">

<div>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>

Answer 2

您应该做的第一件事是从 img 元素中删除 align="left" 属性，因为默认情况下所有元素都是左对齐的，并且对齐属性通常只为 table 保留默认情况下的元素。默认情况下，img 和 div 元素具有 display: block; 属性。您的问题有两个不错的解决方案。

1.浮动这两个元素，不要忘记清除浮动。 你还应该养成正确缩进的习惯，这样你就可以在你的 HTML 结构中看到父子关系。

HTML

    <div class="container">
      <img src="#">
      <div>
        <ul>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
        </ul>
      </div>
    </div>

CSS

    img,
    div {
        float: left;
    }

    .container {
        overflow: hidden;
    }

2。将两个元素都设置为行内块元素。

CSS

    img,
    div { 
        display: inline-block;
    }

Answer 3

在您的具体情况下：

ul {
  clear: left;
}

（如果你想要图片下方的ul）

http://codepen.io/anon/pen/xRENMB

（但是你应该为 ul 和规则使用一个 class，这样其他 ul 就不会受到影响）

左对齐图像打破 ul 块

left align images breaks ul block

html

css

image

html-lists

leftalign