主页 / 问题 / 1096079
Accepted
Степан
Asked:2020-03-18 10:07:12 +0000 UTC2020-03-18 10:07:12 +0000 UTC

为什么不能将应用于同一元素的多个边距设置为百分比？

  • 772
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Главная</title>
            <!--    <link rel="stylesheet" href="style.css"> -->
            <style>


                            .nav1 {
                            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                            font-size:0.875em;
                            margin-left:47.803806734992679355783308931186%;
                            margin-top:3.2942898975109809663250366032211‬%;‬
                            }



            </style> 
            </head>
            <body>
                <div class="general">
                <header class=""> <!-- 1366 670 -->
                    <img src="01_one_page.png" id="picture1">
                    <nav class="nav1"><pre><a href="#">home</a>       <a href="#">about</a>       <a href="#">work</a>       <a href="#">process</a>       <a href="#">services</a>       <a href="#">testimonials</a>       <a href="#">contact</a>
                    </pre></nav>
                </header>
                </div>
            </body>
            </html>

此代码无效，margin-top:3.2942898975109809663250366032211%; 不起作用，但为什么呢？这个问题怎么分类？

html

1 个回答

  1. Best Answer

    首先，您希望以如此准确的方式实现什么目标？您认为用户能够区分47.803806734992679355783308931186%和47.8%吗？

    其次，你margin-top的不起作用，因为父母没有自己的高度，它的高度是由它的内容决定的。

    body,
html {
  height: 100%;
}

.general {
  background: lightgreen;
  height: 100%;
}

.nav1 {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.875em;
  border: 1px solid black;
  margin-left: 48.8%;
  margin-top: 13.2%;
}
    <div class="general">
  <header class="">
    <!-- 1366 670 -->
    <img src="01_one_page.png" id="picture1">
    <nav class="nav1">
      <pre>
        <a href="#">home</a>
        <a href="#">about</a>
        <a href="#">work</a>
        <a href="#">process</a>
        <a href="#">services</a>
        <a href="#">testimonials</a>
        <a href="#">contact</a>
      </pre>
    </nav>
  </header>
</div>

    • 2

相关问题