Cssmargin-leftauto讓一個div離開它的容器 -有解無憂

我正在學習如何制作一個導航條，但我無法將一個專案正確地排列在左邊。這是我的HTML代碼

。

span class="hljs-selector-class">.navul {
  display: flex;
  height: 50px;
  background-color: rgb（71, 71, 71）。
}

.navli1 {
  margin: auto;
}

.navli2 {
  margin-left: auto;
}

.navlink {
  text-decoration: none;
  color: white;
  background-color: rgb（0, 0, 0）。
  padding: 16px 25px;
}

.navlink:hover {
  color: rgb（175, 175, 175）。
}

ul {
  list-style: none;
}

<header>/span>
  <ul class="navul"/span>>
    <li class="navli1"> 
      <a class="navlink" href="#"/span>> 首頁</a>。
    </li>/span>
    <li class="navli2"> 
      <a class="navlink" href="#"/span>> 注銷</a>>
    </li>/span>
  </ul>/span>
</header>/span>

這是結果，注意logout專案在ul容器之外。

uj5u.com熱心網友回復：

。

span class="hljs-selector-class">.navul {
        display: flex;
        height: 50px;
        background-color: rgb（71, 71, 71）。
    }

    .navli1 {
        margin: auto;
    }

    .navli2 {
        margin: auto 0px auto;
    }

    .navlink {
        text-decoration: none;
        color: white;
        background-color: rgb（0, 0, 0）。
        padding: 16px 25px;
    }

    .navlink:hover {
        color: rgb（175, 175, 175）。
    }

    ul {
        list-style: none;
    }

<body>/span>
    <header>/span>
        <ul class="navul"> 
            <li class="navli1"> 
                <a class="navlink" href="#"/span>> 首頁</a>。
            </li>/span>
            <li class="navli2"> 
                <a class="navlink" href="#"/span>> 注銷</a>>
            </li>/span>
        </ul>/span>
    </header>/span>
</body>/span>

在 navli1 中，你告訴 CSS 在頂部、右側、底部和左側有自動邊距，而在 navli2 中，你只告訴左邊的邊距。這就造成了問題

uj5u.com熱心網友回復：

>。

span class="hljs-selector-class">.navul {
    display: flex;
    background-color: rgb（71，71，71）。
}
.navli1 {
    margin: auto;
}
.navli2 {
    margin-left: auto;
}

.navlink{
    text-decoration: none;
    color: white;
    background-color: rgb（0, 0, 0）。
    padding: 16px 25px;
    display: block;
}
.navlink:hover {
    color: rgb（175, 175, 175）。
}
ul {
    list-style: none;
}

<body>/span>
    <header>/span>
        <ul class="navul"> 
            <li class="navli1"> 
                <a class="navlink" href="#"/span>> 首頁</a>。
            </li>/span>
            <li class="navli2"> 
                <a class="navlink" href="#"/span>> 注銷</a>>
            </li>/span>
        </ul>/span>
    </header>/span>
</body>/span>

uj5u.com熱心網友回復：

你沒有完全使用flex。使用諸如justify-content和flex-direction等樣式來完成設計。

。

span class="hljs-selector-class">.navul {
    display: flex;
    height: 50px;
    background-color: rgb（71, 71, 71）。
    flex-direction: 行。
    justify-content: spacearound;
}
.navli1 {
    margin: auto;
}
.navli2 {
    margin: auto;
}

.navlink{
    text-decoration: none;
    color: white;
    background-color: rgb（0, 0, 0）。
    padding: 16px 25px;
}
.navlink:hover {
    color: rgb（175, 175, 175）。
}
ul {
    list-style: none;
}

<header>/span>
        <ul class="navul"/span>>
            <li class="navli1"> 
                <a class="navlink" href="#"/span>> 首頁</a>。
            </li>/span>
            <li class="navli2"> 
                <a class="navlink" href="#"/span>> 注銷</a>>
            </li>/span>
        </ul>/span>
    </header>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/331991.html

標籤：

上一篇：用鍵盤上的Tab鍵洗掉選擇按鈕

下一篇：如何在RailsActiveRecord中對JSONMySql欄位進行精確哈希搜索？