html - 列表中的图像和多个文本行

Question

首先，我遇到了一个非常偶然的问题，将列表中的图像垂直居中。大多数教程建议使用 line-height = image-height 或将列表项分配给表格并使用 vertical-align:middle。似乎都不适合我。 我的第二个问题是没有 jQuery 的可点击列表链接行。我应该使 anchor 显示: block 并将宽度设置为 100%，但随后它在另一行中断并且没有扩展到左侧图像 block 。

这是我的标记:

            <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”；缺少“object”、“applet”、“map”、“iframe”、“button”、“ins”、“del”开始标记之一

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

提到的元素不允许出现在您放置它的上下文中；其他提到的元素是唯一既允许存在又可以包含提到的元素的元素。这可能意味着您需要一个包含元素，或者您可能忘记关闭前一个元素。

此消息的一个可能原因是您试图将 block 级元素(例如“<p>”或“<table>”)放入内联元素(例如“<a>”、“<span> ”，或“<font> ”)。

我建议使用 a标记为 display:block;在 css 中并继续样式化。