Question

我试图用HTML和CSS为网站编写导航栏。我有一个我想在右侧的推特图标的图像。我尝试在图像及其包含标签上使用float：right。谁能告诉我怎么做到这一点？这是我的代码：

＆＃13;

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;
}

＆＃13;

  <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>

＆＃13;

Answer 1

您的问题是容器正在使用display: flex，因此忽略了float: right。解决方案很简单：从float: right代码中移除<a>并添加flex-grow: 10以使其占用所有未使用的空间，然后使用float: right将img移到右侧。但这导致徽标的“可点击”区域比图像大，您可以解决它添加图像和链接在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>

Answer 2

您可以将弹性项目与auto边距对齐，类似于将块级元素与定义的宽度对齐的方式。在这种情况下，您只想提供Twitter链接margin-left: auto，并且可用空间将占用该自动边距。您可以在此处的规范中了解有关弹性布局的自动边距的更多信息 - 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>

CSS-浮动权利不起作用

2 个答案: