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是块元素。他们各占一行。

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

您的代码的这一部分应该包含float:left或display:inline之类的内容，以便将li放在一行中。

我猜你有另一个媒体查询在大分辨率下将这些li排成一行。

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

1 个答案: