Question

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

我有两个div类，一个包含登录链接，另一个是货币小部件短代码。

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

Login/Register |CURRENCY BOX|

但目前他们是这样转过来的：

| CURRENCY BOX |登录/注册

我无法理解为什么他们会被转换？

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

如果你正在做浮动：对，一切都浮动到右边。所以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

当您浮动项目时，该项目会立即向右推，忽略其他正常的“阻止”项目。

如果你有两个并排浮动的物品，你的代码遇到的第一个物品将固定在右边，并会留在那里。

如果下一个项目也设置为向右浮动，则会为先前浮动的项目占用下一个可用空间。

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

您可以将货币和登录按钮包装到包装类中，向右浮动并显示包含元素inline-block

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

Div类是错误的方式吗？

5 个答案: