Question

将 图像（400x100） 左对齐会打破ul块：某些项目位于图像的右侧，某些项目位于图像下方。如何使ul区块保持在一起？即所有项目都在图像的右侧。此外，图像与ul块重叠。

＆＃13;

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

＆＃13;

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

您应该首先删除align="left"元素中的img属性，因为默认情况下所有元素都保持对齐，而align属性通常仅为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和规则的类，以便其他ul不会受到影响）

左对齐图像打破ul块

3 个答案: