Question

首先，我有一个非常随意的问题，将图像垂直居中放在列表中。大多数教程建议使用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;
}

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”start-tag

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

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

此消息的一个可能原因是您尝试将块级元素（例如“<p>”或“<table>”）放入内联元素（例如“{{ 1}}“，”<a>“或”<span>“）。

我建议在css中使用<font>标记a并继续使用样式。

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

1 个答案: