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

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

1 голос
/ 19 января 2012

Во-первых, у меня возникла довольно случайная проблема - вертикальное центрирование изображения внутри списка.В большинстве уроков рекомендуется использовать line-height = image-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;
}

И вот живой пример выше

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

1 Ответ

1 голос
/ 19 января 2012

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

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

Строка 12, столбец 61: тип документа не допускает использование здесь элемента "div"; отсутствует один из следующих объектов: «объект», «апплет», «карта», «iframe», «кнопка», «ins», «del» 

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

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

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

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

...