Question

在margin-top元素上使用css属性<li>时遇到问题。

我想让我的列表与页面的 top 对齐，但我的li元素并未按原样移动到顶部。

以下是我的HTML代码：

<body>
<div class="main_header">
    <h1>Title</h1>
    <ul>
        <li><a href="/about">About Me</a></li>
        <li><a href="/Order">Order</a></li>
        <li><a href="/Designs">Designs</a></li>
        <li><a href="/Contact">Contact</a></li>
    </ul>
 </div>
</body>

这是我的CSS代码：

.main_header li a {
    margin-top: -20px;
    display: inline-block;
}

Answer 1

如果您要查找内联导航样式ul，请将css更改为：

.main_header li {
    margin-top: -20px;
    display: inline-block;
}

如果您希望移动整个列表，请尝试：

ul {
    margin-top:-10px;
}

如果您希望仅将li元素移到彼此附近，请尝试：

.main_header li {
    display: block;
}

注意 - 如果您希望使用内联导航，请使用<nav> html元素来减少样式，因为它会自动将链接置于内联

Answer 2

替换

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='section1'></div>

<div id='section2'></div>

<div id='section3'></div>

通过

pip install xgboost -

输出

<强>

<强> Check it out.

Answer 3

从我可以收集到的东西 - 你想要做这样的事情......

<强> HTML

<div class="main_header">
    <h1>Title</h1>
    <ul>
        <li><a href="/about">About Me</a></li>
        <li><a href="/Order">Order</a></li>
        <li><a href="/Designs">Designs</a></li>
        <li><a href="/Contact">Contact</a></li>
    </ul>
</div>

<强> CSS

.main_header {
  width: 500px;
  margin: 0 auto; 
}
.main_header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main_header li:first-child {
  border-left: 1px solid #ccc; 
}

.main_header li {
  display: inline-block;
  margin: 0;
  padding:10px;
  border-right: 1px solid #ccc;
}

<强> Codepen

http://codepen.io/anon/pen/zKxGPY

为什么我的＆＃34; <li>＆＃34;在使用margin-top时没有移到顶端

3 个答案:

<强> Check it out.