Question

我试图将ul div放在标题div中。

HTML code：

<header>
   <h1>Responsive HTML5</h1>
     <p>This is a demo</p>
    <nav>
      <ul>
         <li><a href="javascript:void(0)">Home</a></l1>
         <li><a href="Javascript:void(0)">About</a></l1>
         <li><a href="Javascript:void(0)">Services</a></l1>
         <li><a href="Javascript:void(0)">Contact</a></l1>
      </ul>
    </nav>
</header>

CSS代码

这是媒体查询的css代码，基本布局一切都很好但不使用此代码。

@media screen and (max-width: 932px){
        header{position: static; overflow: hidden; background-color: #666;}
        header h1, header p{text-align: center;}
        nav{float:left; position: static; padding: 1px;}
        nav ul{width: 60%; margin: 0 auto;}
}

Answer 1

nav
{
 position: static;
 padding: 1px;
 /* remove float: left; */
}
nav ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

将强制TEXT居中，但也不一定是要点。设置list-style-type: none;将完全删除项目符号点，制作一个居中的无序列表。

仅供参考，您的</li>代码应为</li>，而不是</l1>

编辑：这里有一个JSFiddle供您查看

Answer 2

集中UL的最简单方法是为 .nav

创建一个CSS

.nav
{
margin: 0 auto;
list-style-type: none;
text-align: center;
}

您的HTML代码中也有错误，您已使用 / l1 （应该是 / li ）关闭 li 标记本身就是一个错误。希望这会对你有所帮助。

Answer 3

@media screen and (max-width: 932px){
    header{position: static; overflow: hidden; background-color: #666;}
    header h1, header p{text-align: center;}
    nav{ margin: 0 auto; list-style-type: none; text-align: center;}
    nav ul{width: 60%; margin: 0 auto; list-style-type:none; }
}

保证金0自动不以ul为中心？

3 个答案: