2

我正在尝试将无序列表浮动到图像的右侧。我的 html 看起来像这样：

<img src="..." class="left" alt="" />
<h3>Internet Explorer Shortcut keys</h3>
<ul>
<li>Go to the web page that you want to view</li>
<li><strong>Explorer Shortcut keys</strong>: Press <strong>Shift+F12</strong> and the code should appear in a separate window</li>
<li>If this does not work, hold the mouse pointer over a blank part of the web page, right click and choose "<em>HTML</em>".</li>
<li>Alternatively from the menu bar select <em>View</em> and choose "<em>HTML</em>" or "<em>Source</em>" depending on the version you are using.</li>
</ul>

css 相当复杂，但看起来像这样：

.itemFullText ul {margin:20px 0 30px 10px;padding-left:0px;list-style:none;float:left;}
.itemFullText ul li {margin:0 0 6px;padding:0 0 0 30px;float:none;background:url(http://www.jeyjoo.com/img/s.png) -381px 0px no-repeat;line-height:22px;font_weight:bolder;display:block;}
.itemFullText ul li {
    background: url("http://www.jeyjoo.com/img/s.png") no-repeat scroll -381px 0 rgba(0, 0, 0, 0);
    display: block;
    float: none;
    line-height: 22px;
    margin: 0 0 6px;
    padding: 0 0 0 30px;
}

实际页面在这里。谢谢

4

3 回答 3

1

最简单的选择是使用CSS3 flexboxes。

包装ul/img元素，然后将display包装器元素的设置为flex：

.wrapper {
  display: flex;
}
<div class="wrapper">
  <img src="http://placehold.it/200x200" />
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum facilisis posuere.</li>
    <li>Mauris pellentesque, sem a cursus dignissim, turpis sem mollis nisl, id dignissim sem quam at leo. Etiam rutrum sit amet metus eget feugiat. Sed egestas accumsan augue at efficitur.</li>
    <li> Quisque erat arcu, eleifend consectetur semper vel, semper non metus. Cras sed magna metus. Maecenas auctor lacus nec ligula fermentum congue. Aenean a hendrerit ex. Curabitur eu nisi velit. Duis a dignissim tortor.</li>
  </ul>
</div>

或者，您也可以使用 CSS 表格并将display包装器元素的设置为table，然后将display子ul/img元素的设置为table-cell：

.wrapper {
  display: table;
}
.wrapper ul,
.wrapper img {
  display: table-cell;
  vertical-align: top;
}
<div class="wrapper">
  <img src="http://placehold.it/200x200" />
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum facilisis posuere.</li>
    <li>Mauris pellentesque, sem a cursus dignissim, turpis sem mollis nisl, id dignissim sem quam at leo. Etiam rutrum sit amet metus eget feugiat. Sed egestas accumsan augue at efficitur.</li>
    <li> Quisque erat arcu, eleifend consectetur semper vel, semper non metus. Cras sed magna metus. Maecenas auctor lacus nec ligula fermentum congue. Aenean a hendrerit ex. Curabitur eu nisi velit. Duis a dignissim tortor.</li>
  </ul>
</div>

于 2013-10-21T00:13:06.523 回答
0

如果图像宽度始终相同，看起来像（200px），您可以从 中删除浮动<ul>并更改padding-left: 0为padding-left: 210px.

我说 210px 是因为这是图像的宽度加上额外的 10 以使其与上方的标题对齐。

于 2013-10-21T00:12:54.050 回答
-1

就像 OP 发现overflow: hidden的那样，设置ul（奇怪）就像一个魅力！

于 2015-06-14T03:59:20.267 回答