Question

我试图将无序列表浮动到图像的右侧。我的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;
}

实际页面为here。感谢

Answer 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 / {{1}的ul元素到img：

table-cell

.wrapper {
  display: table;
}
.wrapper ul,
.wrapper img {
  display: table-cell;
  vertical-align: top;
}

Answer 2

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

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

Answer 3

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

如何在图像右侧浮动无序列表（ul）而不指定固定宽度

3 个答案: