logo标签列表

CSS- float right不起作用

htmlcss
4

我正在尝试使用HTML和CSS为网站编写导航栏。我有一张Twitter图标的图片，我想把它放在右侧。我已经尝试在图片及其包含的标签上使用float:right，但不起作用。有人能告诉我如何实现吗？以下是我的代码：

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>

2
将 margin-left: auto; 添加到 a.twitter 类中 - 我对 flex 不够了解，无法提供详细的解释，但这个方法是有效的。 - StudioTime
1
尝试在.nav上使用justify-content: space-between;属性。 - Tanasos
@DarrenSweeney那可能是最好的答案 - 您应该提交那个。 - Michael Coker
@Sqnkov 这也会使标志和导航列表分开，我猜 OP 不想要这个。 - Michael Coker
@MichaelCoker 谢谢，但我无法恰当地解释它，如果您可以，请随意将其作为答案添加并进行解释 - 这也会对我有所帮助，所以双赢！ - StudioTime
1
@DarrenSweeney，收到，已发布答案。我仍然认为你可以简单地回答“在a.twitter类中添加margin-left: auto;”就足够了 :) - Michael Coker
2个回答
5
您可以通过使用auto边距来对齐弹性项，类似于您如何使用定义的宽度对齐块级元素。在这种情况下，您只需给Twitter链接margin-left: auto，剩余的空间将占用该自动边距。您可以在此处阅读有关使用flex布局的自动边距的规范的更多信息 - https://www.w3.org/TR/css-flexbox-1/#auto-margins 引用：

在通过justify-content和align-self进行对齐之前，任何正的自由空间都会分配到该维度的自动边距中。

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>

2
您的问题在于容器使用了display: flex，因此float: right被忽略了。解决方法很简单：从<a>标签中删除float: right，并添加flex-grow: 10使其使用所有未使用的空间，然后使用float: right将img移到右侧。但这会导致logo的"可点击"区域比图像更大，您可以通过将图像和链接放在一个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>

这将使导航项和 Twitter 图标之间的所有空白都链接到 Twitter。 - Michael Coker
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接