Wrap horizontal links on both sides of image

I am trying to c开发者_运维知识库reate a horizontal unordered list with an image in the center of it. I cannot place the image inside of the unordered list. How would I set the image to appear in the center with the links floating around it?

*The html for the image cannot be between the ul opening and closing tag.

*Cannot be done in HTML5 or CSS3.

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

End result

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

You probably need to use a different approach:

1 does it have to be a list Item?

<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>

now the css, you can turn the span into block and float it

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

and the image too can be floated:

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

2 it will be better to use 2 list item and float the image in the middle.

You could put a background image on the ul. Class the third link with a padding-right wide enough to cover the width of the image.

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>