当我没有将其设置为绝对时，为什么我的导航按钮会脱离布局？答案

【问题标题】：Why my nav button gets out of the layout when I don't set it to absolute?当我没有将其设置为绝对时，为什么我的导航按钮会脱离布局？
【发布时间】：2021-01-17 01:51:48
【问题描述】：

基本上，我想制作一个导航按钮，当您将其悬停时，它会变成一个十字。

问题是它几乎可以正常工作，但只有当我将“位置：绝对”应用于三行的容器时。但是当我不这样做时，一切都会中断，三行就会脱离布局。为什么？

这是css代码：

ul {
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

.icon {
    position: absolute;
    margin: 50px;
}

.icon div {
    font-weight: bold;
    transition: 0.3s;
    font-size: 5em;
    line-height: 10px;
}

.icon:hover div:nth-child(3) {
    transform: rotate(45deg);
}

.icon:hover div:nth-child(1) {
    transform: rotate(-45deg) translate(-40%, 100%)
}

.icon:hover div:nth-child(2) {
    opacity: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Styles/Nav.css">
</head>
<body>
    <nav>
        <div class="icon">
            <div class="line">⎯</div>
            <div class="line">⎯</div>
            <div class="line">⎯</div>
        </div>
        <ul>
            <li>
                <a href="">Home</a>
            </li>
            <li>
                <a href="">Navigation</a>
            </li>
            <li>
                <a href="">Next</a>
            </li>
            <li>
                <a href="">Something</a>
            </li>
        </ul>
    </nav>
</body>
</html>

但是没有position: absolute 到.icon，看看会发生什么：

ul {
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

.icon {
    margin: 50px;
}

.icon div {
    font-weight: bold;
    transition: 0.3s;
    font-size: 5em;
    line-height: 10px;
}

.icon:hover div:nth-child(3) {
    transform: rotate(45deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Styles/Nav.css">
</head>
<body>
    <nav>
        <div class="icon">
            <div class="line">⎯</div>
            <div class="line">⎯</div>
            <div class="line">⎯</div>
        </div>
        <ul>
            <li>
                <a href="">Home</a>
            </li>
            <li>
                <a href="">Navigation</a>
            </li>
            <li>
                <a href="">Next</a>
            </li>
            <li>
                <a href="">Something</a>
            </li>
        </ul>
    </nav>
</body>
</html>

为什么？与这种奇怪的行为有什么关系？

【问题讨论】：

@RolandStarke 有帮助！但我还是不明白为什么。

标签： html css layout css-animations css-position

【解决方案1】：

您必须将 icon div 设置为 display: inline-block。

尝试在代码上的 div 周围设置边框，您会看到它占据了所有宽度 - margin: 50px，因为默认情况下 divs 是显示块。这意味着当你旋转它时，它会以页面中心为中心旋转，因此旋转会占用更多空间，这就是为什么它们看起来像是在散步的原因。

我建议在测试时使用背景或边框，以便您更好地了解发生了什么。

这里是代码。我添加了一些类，以便于阅读。

ul {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
}

.icon {
  padding: 10px;
  margin: 50px;
  display: inline-block;
}

.line {
  font-weight: bold;
  transition: 0.3s;
  font-size: 5em;
  line-height: 10px;
}

.icon:hover > .line-one {
  transform: rotate(-45deg) translate(-40%, 100%);
}

.icon:hover > .line-two {
  opacity: 0;
}

.icon:hover > .line-three {
  transform: rotate(45deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <div class="icon">
            <div class="line line-one">⎯</div>
            <div class="line line-two">⎯</div>
            <div class="line line-three">⎯</div>
        </div>
        <ul>
            <li>
                <a href="">Home</a>
            </li>
            <li>
                <a href="">Navigation</a>
            </li>
            <li>
                <a href="">Next</a>
            </li>
            <li>
                <a href="">Something</a>
            </li>
        </ul>
    </nav>
</body>
</html>

【讨论】：