html - ul 在 1 行不同的屏幕分辨率

Question

我在 ul 标签的对齐方面遇到了一些问题。当它处于低分辨率(例如 320x480)时，文本不在一行上。

我已经尝试将字体大小从 pt 更改为 em 但它仍然不起作用。

这是我用来获取我所在位置的代码:

HTML:

<div id="location">
    <ul id="spacing">
        <li id="B"> <a href="HomePage.html">B</a> </li>
        <li id="R"> <a href="HomePage.html">R</a> </li>
        <li id="E"> <a href="HomePage.html">E</a> </li>
        <li id="C"> <a href="HomePage.html">C</a> </li>
        <li id="H"> <a href="HomePage.html">H</a> </li>
        <li id="T"> <a href="HomePage.html">T</a> </li>
    </ul>
</div>

CSS:

@media (max-width: 320px)
{
    #B:hover,#R:hover,#E:Hover,#C:Hover,#H:Hover,#T:Hover
    {
        font-size: 25pt;
        transition: 0.5s;
        right: 20px;
        margin-right: 5%;

    }

    #B,#R,#E,#C,#H,#T
    {
        font-size: 20pt;
        padding-left: 10%;

    }
}

我知道这可能很容易解决，但我真的不明白。

提前致谢。

Answer 1

li 默认是 block 元素。它们各占一行。

#B,#R,#E,#C,#H,#T
{
    font-size: 20pt;
    padding-left: 10%;
}

您的这部分代码可能应该包含类似 float:left 或 display:inline 的东西，以将 li 放在一个行。

我猜你有另一个媒体查询，在大分辨率下将那些 li 对齐在一行中。