Question

我正在尝试验证我的代码如下：

<ul class="work">
    <li>
        <a href="work1.html"> <img src="images/work_1.png" alt="Work 1 Logo" /> <h4>Lorem ipsum doler sit amet consectetur adipiscing elit.</h4> Work 1 </a>
    </li>
    <li>
        <a href="work2.html"> <img src="images/work_2.png" alt="Work 2 Logo" /> <h4>Lorem ipsum doler sit amet consectetur adipiscing elit.</h4> Work 2 </a>
    </li>
    <li>
        <a href="work3.html"> <img src="images/work_3.png" alt="Work 3 Logo" /> <h4>Lorem ipsum doler sit amet consectetur adipiscing elit.</h4> Work 3 </a>
    </li>
</ul>

我面临的问题当然是块级元素（h4）不应该在内联元素（a）中。是否有任何XHTML 1.0严格有效的方式，这将允许我看到我现在看到与此代码相同的效果？通过在（a）中使用（h4）得到的独特美学效益是，有两种不同的文本样式都受到同一锚点的影响。它实际上在我的页面上看起来很不错！

Answer 1

将您的h4更改为span并为其提供相同的样式。

<ul class="work">
    <li>
        <a href="work1.html"> <img src="images/work_1.png" alt="Work 1 Logo" />
        <span>Lorem ipsum doler sit amet consectetur adipiscing elit.</span>
        Work 1</a>
    </li>
etc.

如果有一种有效的方法来更改超链接中的文本样式？

1 个答案: