イメージの両側に水平リンクをラップします。

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に背景画像を置くことができます。 画像の幅をカバーするのに十分な幅のパディング（padding-right）で3番目のリンクを分類します。

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>