將圖像兩側的水平鏈接包裹起來

我正在試圖創建一個水平的無序列表，並在圖像的中心有一個圖像。我無法將圖像置於無序列表中。我將如何設置圖像出現在中間，並且鏈接在其周圍漂浮？將圖像兩側的水平鏈接包裹起來

*圖像的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-|

來源

2011-08-10 Matthew Sprankle

我建議做兩個單獨的列表，並把它們之間的'img'。 –

您可能需要使用不同的方法：

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列表項並將圖像浮在中間。

來源

2011-08-10 21:12:56 Ibu

不幸的是，它必須是一個列表，圖像不能進入代碼。該列表將由無法修改的腳本生成。 –

你可以在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>

來源

2011-08-10 21:31:55 Keefer

不幸的是，圖像不能與列表中的任何元素進行連接。 –

將圖像兩側的水平鏈接包裹起來

回答

相關問題