Question

我正在尝试创建一个水平无序列表，其中间有一个图像。我无法将图像放在无序列表中。如何将图像设置为显示在中心并且链接在其周围浮动？

*图像的html不能位于ul开始和结束标记之间。

*无法在HTML5或CSS3中完成。

<img>
<ul>
<li><a></li>
<li><a></li>
<li><a></li>
<li><a></li>
<li><a></li>
<li><a></li>
</ul>

最终结果

|-link-| |-link-| |-link-|   |-img-|   |-link-| |-link-| |-link-|

Answer 1

您可能需要使用其他方法：

1是否必须是列表项？

<div class="container">
  <span><a href="#">Link</a></span>
  <span><a href="#">Link</a></span>
  <span><a href="#">Link</a></span>
  <img src="" />
  <span><a href="#">Link</a></span>
  <span><a href="#">Link</a></span>
  <span><a href="#">Link</a></span>
</div>

现在是css，您可以将跨度转换为块并将其浮动

.container span {
   display: block;
   float: left;
   margin-right: 15px;
}

并且图像也可以浮动：

.container img {
   float: left;
  ....
}

2最好使用2个列表项并将图像浮动到中间。

Answer 2

你可以在ul上放一个背景图片。将第三个链接分为宽度足以覆盖图像宽度的填充。

CSS：

ul         {width:700px; background:url('/path/to/image.jpg') no-repeat 50% 0}
li         {float:left; width:100px;}
.padded    {padding:0 100px 0 0}

HTML

<ul>
<li><a></li>
<li><a></li>
<li class="padded"><a></li>
<li><a></li>
<li><a></li>
<li><a></li>
</ul>

在图像的两侧包裹水平链接

2 个答案: