替代＆＃39; margin-top＆＃39;？ - CSS

Question

我正在尝试将一些导航标签放到<article>标签上，但它在firefox上无法正常工作，而且在不同的屏幕上，它会混乱。有没有人知道一种适用于所有浏览器的替代方案，并且在屏幕调整大小时不会改变？

这是我想要的结果：

确切地说，除了我不想使用固定的margin-top

修改

代码：

导航：

nav {
    width: 100%;
    height: 4%;
}

nav ul {
    list-style-type: none;
}

nav li {
    width: 100%;
    background-color: #9A9489;
    display: inline-block;
    text-align: center;
    width: 11%;
    font: 1.4em/1.3em Bonveno, Open Sans, Sans-Serif;
    float: right;
    cursor: pointer;
    margin-right: 0.5%;
    border-top-left-radius: 0.3125em;
    border-top-right-radius: 0.3125em;
    transition: background-color 0.2s ease-in-out;
}

文章（没有margin-top）：

article {
    width: 99.5%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0.3125em 0 #9A9489;
    padding: 0 0 0.5% 1.5%;
}

HTML：

<nav>
    <ul>
        <a href="contact.php">
            <li>Contact</li>
        </a>

        <a href="pictures.php">
            <li>Pictures</li>
        </a>

        <a href="about.php">
            <li class="selected">About</li>
        </a>

        <a link="black" href="index.php">
            <li>Home</li>
        </a>
    </ul>
</nav>

<article>
<h1>Hello World</h1>

<p>Hello world</p>
</article>

Answer 1

嗯，你总是可以尝试将位置作为保证金的替代方案。 在这种情况下，我认为您必须使用相对位置，所以请执行以下操作：

.YOUR_TABS_SELECTOR{
  position: relative;
  top: 10px;
}