Question

由于布局要求，我在锚标记中附加了h4标记和p标记。问题是这不能正确验证。我需要链接的锚标记和背景图像上的鼠标悬停操作。

在不破坏布局的情况下，这样做的正确方法是什么？

这是HTML：

<div class="services">
    <a href="http://corecubed.com/our-services/{url_title}">
        <h4>{home_page_title}</h4>
        <p>{home_page_blurb}</p>
    </a>
</div>

这是CSS：

.services a:link, .services a:visited {
    width: 165px;
    height: 181px;
    display: block;
    color: #5e5e5e;
    text-decoration: none;
    float: left;
    margin: 0 5px 20px 0;
    background: url(/images/bg_services.png) no-repeat center bottom;
}

.services a:hover {
    background-position: center top;
}

.services h4 {
    width: 140px;
    height: 50px;
    display: block;
    font-size: 13px;
    font-weight: normal;
    color: #eaeaea;
    margin: 0;
    padding: 10px 10px 0 15px;
}

.services p { 
    line-height: 19px;
    padding: 0 10px 0 10px; 
}

我愿意接受任何有力的指导。

Answer 1

随着HTML的发展，这可能不是问题。

在HTML5中，a标记可以包含内联和块级元素（分别是短语和流元素）。

请参阅：http://www.w3.org/TR/html-markup/a.html#a

实施例

我使用了以下代码段：

<a href="http://www.yahoo.com">
    <h3>Go see Yahoo...</h3>
    <p>A short paragraph.</p>
</a>

并创建了以下HTML5页面：

http://jsfiddle.net/audetwebdesign/Hm7wp/show/

使用以下验证器http://validator.w3.org，我获得了成功的结果除了警告HTML5验证器是实验性的（正在进行中）。

您可以查看Validation Results并查看详细信息。

如何将内容封装在锚标记中并进行验证？

1 个答案:

实施例