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-浮动权利不工作

回答

相关问题