jquery - elements breaks xhtml 替代方案是 span 无法在其上添加填充或边距

Question

我在 xhtml 中写了一些东西，我希望我的描述元素和标题元素位于图像的左侧我使用 div 元素而不是 span 但这违反了 xhtml 的规则所以我也尝试了 span 元素但是我无法定位它们或向它们添加填充或边距我该怎么办。嘻嘻就是我的代码。我希望我的描述和标题元素完全位于图像旁边中间的垂直位置，距离左侧约 5 像素

<div class="menu" style="width:300px; height:300px">
    <ul>
        <li class="menu-item">
            <a href="#">
                <img alt="" src="images/Icon.jpg" width="36" height="36" style="float:left; border:1px solid #000000" />
                <div class="header">Electronics</div> // << span here doesn't work
                <div class="description">Computers & Office Supplies</div> // << span here doesn't work
            </a>
        </li>
    </ul>
</div>

违反xhtml规则我该怎么办

Answer 1

这样它们在同一行上，水平(即使你说的是垂直的，但我认为你把它们混在一起了..因为你当前的代码将垂直显示它们):

<div class="menu" style="width: 300px; height: 300px">
    <ul>
        <li class="menu-item">
            <a href="#">
                <img alt="There should be an alt text here" src="images/Icon.jpg" style="float: left; border: 1px solid #000000; width: 36px; height: 36px;" />
                <span style="float: left; display: block;" class="header">Electronics</span>
                <span style="float: left; display: block;" class="description">Computers & Office Supplies</span>
            </a>
        </li>
    </ul>
</div>

但是，我真的不能理解，为什么你的 xhtml 没有通过 div 正确验证？!我想你的意思是，你的布局被打破了.. 因为 div = display: block;。简而言之，这意味着它将是全宽的..并且并不真正关心其他任何人 -- div 是自私的。

所以在那种情况下，你需要以某种方式 float 它.. 这使得它不那么自私。或者让它成为 display: inline-block;。然而，内联 block 不是很跨浏览器..所以我建议使用 float 。

• http://www.w3schools.com/css/css_float.asp
• http://www.w3schools.com/cssref/pr_class_display.asp