什么会导致此按钮和文本不内联？

Question

情况：我们的应用程序标题行中有 3 个按钮。格式如下：

<ul> class="menu dropdown clearfix">
    <li class="{buttonlabel}">
        <a href="#">
            <span> </span>
            <strong>{ButtonLabel}</strong>
        </a>
</li>

<span> CSS 有一个背景图像来显示一个图标（大约 20 像素正方形）。

所以，基本上，您已经获得了作为按钮的内联无序列表项。每个列表项都有一个 span（图标）和一个 strong（按钮标签）。

现在--2 台计算机/用户。相同的操作系统（Mac）。相同的浏览器（Chrome）。相同的网站/网址。一位用户按预期看到它们 - 也就是说，所有列表项彼此内联，然后列表项中的内容（按钮和标签）也是内联的 - 按钮然后是标签。

其他用户将每个列表项中的内容视为块（有效）。在顶行显示图标。然后一个中断（不是文字 html 中断，只是下一行），并且按钮标签显示在图标下方。他们的左边距对齐。

我尝试通过缩小浏览器宽度来重现“工作”列表项，以查看按钮是否在某个时候“中断”到更小的状态——它们没有。

<li> 显示值为 display: list item（宽度自动继承）。 <a> 标签是 display: block（宽度自动继承）。 <span> 是 display:inline-block，具有编码宽度 (24px)（不是自动宽度或继承宽度）。 <strong> 也是 display: inline-block, width: auto (inherited)。

更糟糕的是，看到错误内容的用户说周一是正常的，周二是错误的。

想法？

Answer 1

听起来你应该在周一加载备份，并在周二做一个“差异”来看看有什么变化，因为它以前工作过，这可能不是运行它的平台的错，而是有人更改了代码，使得一个浏览器能够解析它而另一个不能。人为错误是发明版本控制的原因。

如果这不起作用，请记住验证您的 XHTML 和 CSS，以确保错误语法不是问题。这些验证器的目的是确保如果有效，则代码将按预期显示，如果不正确，则为浏览器制造商的错误，应将其报告为错误。

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Answer 2

hai i think you initalize the class out of ul tag. so you put the class in inside ul tag.


<ul class="menu dropdown clearfix">
    <li class="{buttonlabel}">
        <a href="#">
            <span> </span>
            <strong>{ButtonLabel}</strong>
        </a>
   </li>
</ul>