Div 类是不是转错了？

Question

您好，我正在使用 Wordpress 和 Woocommerce 以及 Wootique 主题。

我有两个 div 类一个包含登录名 link 另一个是货币小部件简码。

我希望他们像这样在同一条线上：

Login/Register |CURRENCY BOX|

但目前他们是这样轮换的：

|货币盒| Login/Register

我不明白为什么他们会轮换？

.login {
  display: inline-block;
  float: right;
  margin: auto;
}
.currency {
  float: right;
  display: inline-block;
  margin: auto;
}

<div class="login">
  <a href="http://casper-creations.com/my-account/">Login/Register</a>
</div>
<div class="currency">
  <?php echo do_shortcode( '[woocs]' );?>
</div>

我确定这很简单，但我已经到处搜索了！有谁知道为什么这些 div 是错误的方式？

Answer 1

如果你在做 float: right 一切都向右浮动。所以html中的第一个元素是最右边的，之后第二个元素粘在右边的第一个元素上。

.login {
  display: inline-block;
  float: right;
  margin: auto;
}
.currency {
  float: right;
  display: inline-block;
  margin: auto;
}

<div class="currency">
  Your currency
</div>
<div class="login">
  <a href="http://casper-creations.com/my-account/">Login/Register</a>
</div>

Answer 2

因为它们设置为 float:right，所以最上面的 div 将是最右边的 div。要切换它们，只需将 html 重新排序为：

<div class="currency">
  <?php echo do_shortcode( '[woocs]' );?>
</div>
<div class="login">
  <a href="http://casper-creations.com/my-account/">Login/Register</a>
</div>

Answer 3

当您浮动项目时，该项目会立即向右推，忽略其他正常的 'block' 项目。

如果您有两个并排向右浮动的项目，则您的代码遇到的第一个项目将固定在右侧，并留在那里。

如果下一个项目也设置为向右浮动，它将占用下一个可用的 space 到先前浮动的项目。

Answer 4

您可以选择使用定位而不是浮动元素：

.login {
  display: inline-block;
  position:absolute;
  margin: auto;
 right:30px;
}
.currency {

  display: inline-block;
  margin: auto;
  position:absolute;
  right:0;
}

<div class="login">
  <a href="http://casper-creations.com/my-account/">Login/Register</a>
</div>
<div class="currency">
  <?php echo do_shortcode( '[woocs]' );?>
  £/$
</div>

Answer 5

您可以将货币和您的登录按钮包装到一个包装器中 class，使其向右浮动并显示包含的元素 inline-block

片段

body {
  font-family: Arial, sans-serif;
}
.wrap {
  float: right;
}
.login {
  display: inline-block;
  margin: auto;
  background: #CCCCCC;
  padding: 10px;
}
.login a {
  color: #383838;
  text-decoration: none;
}
.currency {
  display: inline-block;
  color: #FFFFFF;
  background: #000000;
  padding: 10px;
}
p {
  margin: 0;
}

<div class="wrap">
  <div class="login"> <a href="http://casper-creations.com/my-account/">Login/Register</a>

  </div>
  <div class="currency">
    <p>Currency</p>
  </div>
</div>

Div 类是不是转错了？

Div classes are the wrong way round?

html

css

wordpress

woocommerce

Div 类 是不是转错了？

Div classes are the wrong way round?

html

css

wordpress

woocommerce

Div 类是不是转错了？