主页 / 问题 / 1097245
Accepted
Степан
Asked:2020-03-20 19:03:55 +0000 UTC2020-03-20 19:03:55 +0000 UTC

需要使用 margin-top 将元素移动 N%

  • 772
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Главная</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="general">
        <header id="header1">
            <img src="01_one_page.png" id="picture1">
            <nav class="nav1"><pre class="nav2">home       about       work       process       services       testimonials       contact</pre></nav>
        </header>
    </div>
</body>
</html>



#general {
    height:5797px;
}
#header1 {
    background:rgb(233,233,233);
    margin:0 auto;
    max-width:1366px;
    width:100%;
    height:11.5577%;
}
#picture1 {
    margin-left:7.17%;
    margin-top: 2.781%;
}
.nav1 {
    font-size: 0.75em;
    margin-top: 3.29%;
    margin-left:47.8%;
}
.nav2 {
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

有 #picture1 和 .nav1，在这种情况下，我可以使用公式“元素大小（以像素为单位）/父元素大小（以像素为单位 * 100）”，将 #picture1 作为百分比移动 96px 宽度和 38px 高度，其中元素大小（从#header1 的左边缘到图片应该在的位置的宽度（以像素为单位）为 38px（好吧，margin-top == 38px），并且大小合适。元素（最大宽度 #header1）为 1366 像素。

但是对于 .nav1，并非一切都井井有条，与布局相比，它显然不是应有的位置。我想，鉴于您需要将“元素大小”除以父元素的宽度，该元素需要移动，因为margin-top / bottom和margin-left / right的移动百分比是相对于父元素的宽度执行

任务：使用margin-left和margin-top和百分比值将.nav1相对于#header1向右移动653px和向下移动45px

html

1 个回答

  1. Best Answer

    为了在 css 中计算某些东西，有一个 calc 函数，请阅读它，它本身会在您的代码中进行减法和除法运算，以便元素以某种方式明确地相对于元素表现，然后您需要设置相对定位儿童的属和绝对，但一般来说，如果你做导航，据我所知，那么 pre 标签根本不是。制作列表，重置样式和填充，设置 display : flex 和 align

    • 0

相关问题