1

将图像（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>

4

3 回答 3

0

您应该做的第一件事是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. 将两个元素都设置为 inline-block 元素。

CSS

    img,
    div { 
        display: inline-block;
    }
于 2016-11-16T23:51:52.940 回答
0

在您的特定情况下：

ul {
  clear: left;
}

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

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

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

于 2016-11-16T23:56:37.127 回答
0

只需将一个添加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>

于 2016-11-16T23:32:33.923 回答