Question

我从freecodecamp学习HTML和CSS。使用所有Bootstrap代码我有点困惑。

这是我的代码：

h1 {
  text-align: center;
  letter-spacing: 5px;
  color: coral;
  font-family: verdana;
}
ul {                
  height: 20%;
  background-color: darkgrey;
  list-style-type: none;
  display: solid;                                              
}
li {   
  display: inline-block;
  padding: 0% 5% 0% 5%;
  text-align:                    
}
#first {
  margin: 0% 0% 0% 30%;
}
li:hover {           
  background-color: bisque;
  text-decoration: none;
}

<h1> Test Website </h1>
<div class="container-fluid">
  <div class="menu">
    <div id="tope"></div>
    <ul id="navbar">                   
      <li id="first"><a href="www.a.com"> Us </a></li>
      <li><a href="www.b.com"> Work </a></li>
      <li id="last"><a href="www.c.com"> Vids and photos </a></li>   
    </ul>    
  </div>
</div>

演示：CodePen。

我正在努力解决的问题是，当我调整屏幕大小时，我的navtab（实际上，所有<li>元素）都不会跟随主标题<h1>元素。

我想创建某种网格系统，其中<li>相对于<h1>居中，但没有Bootstrap。那可能吗？如果是这样，怎么样？

Answer 1

对$this->setHydrator(new ClassMethods(true));，.menu和ul尝试这样做。我不知道这是否符合您的需求，但是使用此代码，您可以为li设置一个宽度，然后ul将其设置为中心，并保持在标题下方。

margin: auto

Answer 2

您的列表在调整大小时未正确对齐的原因是您已向margin-right添加了#first值。这使得一切都不对齐。但是你非常接近来实现你想要的结果！

您只需进行一些更正：

http://www.bootply.com/YHHS5on2Ej

ul {                
    background-color: darkgrey;
    list-style-type: none;
    width: 100%;
    text-align: center;
}

li {   
    display: inline-block;
    padding: 0% 5% 0% 5%;
}

删除#first的所有CSS并注意display:solid无效CSS

Navtab问题

2 个答案: