2010-10-19 3 views
2

Возможно ли создать ширину LI для жидкости с фоновой imaage, которая регулирует его размер на основе содержимого и не будет соответствовать ширине родительского DIV.Толщина листа элемента HTML HTML с использованием CSS

Если возможно, используйте только CSS.

<div id="navbody"> 
    <!--Button Start--> 
    <ul id="button"> 
     <li> 
      Home 
      <div class="btnright"></div> 
     </li> 
     <li> 
      About Us 
      <div class="btnright"></div> 
     </li> 
    </ul> 
    <!--Button End--> 
</div> 

LI содержит фон:

alt text

ПРИМЕЧАНИЕ: это имеет неправильную левую форму

Затем DIV используется для завершения нерегулярного правильной формы

Меню содержится в родительском div с фиксированной шириной []

[[Главная] [О нас]]

Как вы можете видеть, я хочу, чтобы LI автоматически настраивался на основе контента.

ответ

2

Ох. Я правильно не понял ваш вопрос, пока вы не отправили образец кода.

Вот макет:

<div style="width: 500px;border: 1px solid Blue;"> 
    <ul style="padding-left:0;margin-left:0;"> 
     <li style="list-style-type: none;"> 
      <div style="float:left; height:24px;width:20px;background-color:Green;"></div> 
      <div style="float:left;height:24px;background-color:Yellow;">Some content here</div> 
      <div style="float:left; height:24px;width:20px;background-color:Red;"></div> 
      <div style="clear:both;"> 
     </li> 
     <li style="list-style-type: none;"> 
      <div style="float:left; height:24px;width:20px;background-color:Green;"></div> 
      <div style="float:left;height:24px;background-color:Yellow;">Some other content here</div> 
      <div style="float:left; height:24px;width:20px;background-color:Red;"></div> 
      <div style="clear:both;"> 
     </li> 
    </ul> 
</div> 

зеленый ДИВ ваша левая часть изображения, красный ваша правая часть изображения и желтый один ваш повторив центр изображения. Для этого вы должны нарезать изображение в эти 3 части и добавить их в качестве фона для 3 div. Просто играйте с измерением, чтобы он соответствовал вашему желаемому результату.

Надеется, что это помогает, Алиню

+0

Привета, могли бы вы более подробно объяснить. Я не понимаю. Спасибо –

+0

Вам следует добавить более подробную информацию и, возможно, код того, что у вас есть сейчас и чего вы хотите достичь. –

+0

Привет, я добавил подробности –

Смежные вопросы