CSS-浮動權利不工作

我想爲HTML和CSS中的網站編寫導航欄。我在右側有一張我想要的twitter圖標圖片。我已經嘗試過在圖像上使用float：right和它的包含標籤。任何人都可以告訴我我該如何做到這一點？這裏是我的代碼：CSS-浮動權利不工作

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: "Arial"; 
 
} 
 

 
header { 
 
    height: 60px; 
 
    width: 100%; 
 
} 
 

 
.nav { 
 
    display: flex; 
 
    height: 60px; 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    box-shadow: 0 0 0 2px #C3C3C3; 
 
    position: absolute; 
 
} 
 

 
img.logo { 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 0 20px; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #FFF; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 21px 16px; 
 
    margin: 0 10px; 
 
    text-decoration: none; 
 
    color: #7D848E 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
img.twitter { 
 
    height: 40px; 
 
    width: 40px; 
 
    margin: 10px 10px; 
 
} 
 

 
a.twitter { 
 
    display: block; 
 
    float: right; 
 
}

<body> 
 

 
    <div class="nav"> 
 
     <a href="#"> 
 
     <img class="logo" src="/static/arch.png"> 
 
     </a> 
 
     <ul> 
 
     <li><a href="#">ITEM</a></li> 
 
     <li><a href="#">ITEM</a></li> 
 
     <li><a href="#">ITEM</a></li> 
 
     <li><a href="#">ITEM</a></li> 
 
     </ul> 
 
     <a class="twitter" href="http://www.twitter.com"> 
 
     <img class="twitter" src="/static/twitter.png"> 
 
     </a> 
 
    </div> 
 

 
    </body>

來源

2017-03-16 Zachary Goldberg

添加'保證金左：自動;'類'a.twitter' - 我不知道有足夠的瞭解Flex中提供這作爲一個答案，我不能解釋它適當，但它的工作原理 –

嘗試和使用'.nav'上的'justify-content：space-between ;'屬性＃ – snkv

@DarrenSweeney這可能是最好的答案 - 你應該提交。 –

您可以對齊使用auto邊距彈性項目類似於如何將塊級別元素與定義的寬度對齊。在這種情況下，您只需要提供twitter鏈接margin-left: auto，並且可用空間將佔用該自動保證金。你可以閱讀更多關於柔性佈局汽車的利潤率在這裏的規範 - 通過證明內容和調整自我，任何積極的自由空間被分配到該維度汽車利潤率https://www.w3.org/TR/css-flexbox-1/#auto-margins

此前對齊。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: "Arial"; 
 
} 
 

 
header { 
 
    height: 60px; 
 
    width: 100%; 
 
} 
 

 
.nav { 
 
    display: flex; 
 
    height: 60px; 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    box-shadow: 0 0 0 2px #C3C3C3; 
 
    position: absolute; 
 
} 
 

 
img.logo { 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 0 20px; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #FFF; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 21px 16px; 
 
    margin: 0 10px; 
 
    text-decoration: none; 
 
    color: #7D848E 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
img.twitter { 
 
    height: 40px; 
 
    width: 40px; 
 
    margin: 10px 10px; 
 
} 
 

 
a.twitter { 
 
    margin-left: auto; 
 
}

<body> 
 

 
    <div class="nav"> 
 
     <a href="#"> 
 
     <img class="logo" src="/static/arch.png"> 
 
     </a> 
 
     <ul> 
 
     <li><a href="#">ITEM</a></li> 
 
     <li><a href="#">ITEM</a></li> 
 
     <li><a href="#">ITEM</a></li> 
 
     <li><a href="#">ITEM</a></li> 
 
     </ul> 
 
     <a class="twitter" href="http://www.twitter.com"> 
 
     <img class="twitter" src="/static/twitter.png"> 
 
     </a> 
 
    </div> 
 

 
    </body>

來源

2017-03-16 17:12:10

你的問題是，容器使用display: flex，所以float: right被忽略。解決方案很簡單：從<a>標記中刪除float: right，並添加flex-grow: 10以使其使用所有未使用的空間，然後將該img向右移動float: right。但是，這會導致該標誌的「點擊」區域是比圖像，你可以解決它添加圖像和鏈接是一個div內更大：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: "Arial"; 
 
} 
 

 
header { 
 
    height: 60px; 
 
    width: 100%; 
 
} 
 

 
.nav { 
 
    display: flex; 
 
    height: 60px; 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    box-shadow: 0 0 0 2px #C3C3C3; 
 
    position: absolute; 
 
} 
 

 
img.logo { 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 0 20px; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #FFF; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 21px 16px; 
 
    margin: 0 10px; 
 
    text-decoration: none; 
 
    color: #7D848E 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
img.twitter { 
 
    height: 40px; 
 
    width: 40px; 
 
    margin: 10px 10px; 
 
    float: right; 
 
} 
 

 
div.twitter { 
 
    display: block; 
 
flex-grow: 10; 
 
}

<body> 
 

 
    <div class="nav"> 
 
     <a href="#"> 
 
     <img class="logo" src="/static/arch.png"> 
 
     </a> 
 
     <ul> 
 
     <li><a href="#">ITEM</a></li> 
 
     <li><a href="#">ITEM</a></li> 
 
     <li><a href="#">ITEM</a></li> 
 
     <li><a href="#">ITEM</a></li> 
 
     </ul> 
 
     <div class="twitter"> 
 
     <a href="http://www.twitter.com"> 
 
      <img class="twitter" src="/static/twitter.png"> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    </body>

來源

2017-03-16 16:57:30

這將使導航條目和twitter圖標之間的所有空白鏈接鏈接到twitter 。 –

@MichaelCoker更新，感謝您的提示 –

CSS-浮動權利不工作

回答

相關問題