Question

对于计算机，我在左侧有导航设置，但对于手机，我希望它在显示屏中居中。我有什么想法吗？

html文件

    <div id="topNav">
    <nav class="navigation" role="navigation"
    <ul>
        <li class="Work">
            <a href="Work.html">Work</a>
        </li>
        <li class="About">
            <a href="About.html">About</a>
        </li>
        <li class="Contact">
            <a href="Contact.html">Contact</a>
        </li>
        </ul>
        </div>

Css文件：

    topNav
    {
    display:block;
    }

    ul,li
    {
    list-style-type: none!important;
    font-family: 'PT Sans', Arial, sans-serif;
    display: block;
    max-width: 95%;
    margin-left: 5%;
    margin-top: 6%;
    font-size:25px;
    font-style: normal;
    font-weight: 100;
    line-height: 1%;
    letter-spacing: -1px;
    float:left;
    }

    /* iphone */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    topNav {
    display: inline-block;
    vertical-align: middle;
      }
    }

我对此很新，所以就像试着说一种我不懂的语言。所以，感谢您的帮助，

祝你有个美好的一天！

Answer 1

将您的最后一段代码更改为 -

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#topNav { /* you missed # before topNav */
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
}

并确保＃topNav的宽度设置小于设备宽度，以便检查它是否在中心对齐？

如果上述方法不起作用，也可以试试这个 -

nav {
margin: 0 auto;
}

Answer 2

看看这是否有效！

CSS

.clearfix{clear:both}
@media screen and (max-width:320px) /*for small screen like mobile*/
{
  ul{border:1px solid red}
  li{float:left;padding:5px}
}
@media screen and (min-width:321px)  /*for screen larger than mobile*/
{
  li
    {
       list-style-type: none!important;
       font-family: 'PT Sans', Arial, sans-serif;
       display: block;
       max-width: 95%;
       margin-left: 5%;
       margin-top: 6%;
       font-size:25px;
       font-style: normal;
       font-weight: 100;
       letter-spacing: -1px;
       float:left;
       border:1px solid red;
    }
}

和HTML

<div id="topNav">
<nav class="navigation" role="navigation">
<ul>
    <li class="Work">
        <a href="Work.html">Work</a>
    </li>
    <li class="About">
        <a href="About.html">About</a>
    </li>
    <li class="Contact">
        <a href="Contact.html">Contact</a>
    </li>
    <div class="clearfix"></div>
    </ul>
</nav>

如果你仍然遇到问题，请回来！

Answer 3

请尝试这个：

<div id="topNav">
<nav class="navigation" role="navigation">
<ul>
    <li class="Work">
        <a href="Work.html">Work</a>
    </li>
    <li class="About">
        <a href="About.html">About</a>
    </li>
    <li class="Contact">
        <a href="Contact.html">Contact</a>
    </li>
    </ul>
</div>

CSS

#topNav{
    display:block;
    }
ul li{
    list-style-type: none!important;
    font-family: 'PT Sans', Arial, sans-serif;
    display: block;
    margin-top: 6%;
    padding: 0 5px;
    font-size:25px;
    font-style: normal;
    font-weight: 100;
    line-height: 1%;
    float:left;
    }

    /* iphone */

@media (max-width : 480px) and (min-width : 320px) {
    #topNav{
        margin: 0 auto;
        width: 239px;
    }
    ul{
        padding:0;
    }
}

如何仅为移动设备设置导航中心？ CSS

3 个答案: