Изображение и несколько текстовых строк внутри списка

Question

Сначала у меня довольно случайная проблема, вертикально центрирующая изображение внутри списка. В большинстве руководств рекомендуется использовать height-height = height-height или присвоение элемента списка таблице и использовать vertical-align: middle. Кажется, я не работаю для меня. Моя вторая проблема заключается в том, что строка ссылок с интерактивным списком без jQuery. Я должен сделать отображение привязки: заблокировать и установить ширину до 100%, но затем он разбивается на другую строку и не распространяется на левый блок изображения.

Это моя разметка:

  <ul> 
       <li> 
        <a href="#"> 
         <div id="firstbutton" class="button"></div> 
         <div class="group"> 
         one<br/> 
          <span>tagline</span> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <div id="secondbutton" class="button"></div> 
         <div class="group"> 
          two<br/> 
          <span>tagline</span> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <div id="thirdbutton" class="button"></div> 
         <div class="group"> 
          three<br/> 
          <span>tagline</span> 
         </div> 
        </a> 
       </li> 
      </ul> 

Мой Css:

ul{ 
// line-height:180px; 
} 

li{ 
height:60px; 
min-width:200px; 
margin:2px; 
} 


li a{ 
display:block; 
width:100%; 
} 

html>body li a { 
width: auto; 
} 

.group{ 
text-align:right; 
float:right; 
margin-right:20px; 
width:auto; 
} 

.button{ 
width:30px; 
height:30px; 
float:left; 
margin-left:20px; 
} 

И here is a live example of above

А вот изображение

Answer 1

Валидатор W3 http://validator.w3.org/check может дать вам подсказку ... посмотрите код ниже.

Я не думаю, что <a> тег поддерживает <div> внутри.

Строка 12, столбец 61: тип документа не позволяет использовать элемент «div» здесь; отсутствует один из «объекта», «апплет», «кнопка» «карте», «IFRAME», «входы», «Del» старт-тег

<div id="firstbutton" class="button"></div> 

Указанный элемент не может появляться в контекст, в который вы его поместили; другие упомянутые элементы являются единственными, которые разрешены там и могут содержать упомянутый элемент. Это может означать, что вам нужен содержащий элемент или, возможно, вы забыли закрыть предыдущий элемент.

Одной из возможных причин этого сообщения в том, что вы попытались поместить элемент блочного уровня (например, «<p>» или «<table>„) внутри строкового элемента (например,“<a>», «<span>», или " <font> ").

Я бы рекомендовал использовать тег a как display:block; в css и продолжать стилизовать.