javascript - 如何让div内容彼此相邻

Question

我希望我的 div 内容彼此相邻，但它们显示在彼此下方。

这个div是右对齐的，是导航栏div的一部分。我尝试将 float left 用于文本，但没有做出任何改进。

    <div align="right" class="log-in-checkout" id="left-nav">
                  <span class="login">
                        <a href="#" data-toggle="modal" data-target="#login-modal"><span class="hidden-xs text-uppercase">Sign-in</span></a> or <a href="customer-register.html"><span class="hidden-xs text-uppercase">Register</span></a>

                   </span>
                       <span class="checkout">
                           <a class="btn btn-shopping-cart" href="#"><i class="fa fa-shopping-cart fa-2x"></i></a>
                       </span>
    </div>

结果:

SIGN-IN
or
REGISTER
Check-out icon

而我想要:

SIGN-IN or REGISTER checkout icon

Answer 1

看起来您代码中的其他一些 CSS 正在影响您的样式。只放入您期望呈现的 html 呈现

<div align="right" class="log-in-checkout" id="left-nav">
  <span class="login">
    <a href="#" data-toggle="modal" data-target="#login-modal">
      <span class="hidden-xs text-uppercase">Sign-in</span>
    </a>
    or 
    <a href="customer-register.html">
      <span class="hidden-xs text-uppercase">Register</span>
    </a>
  </span>
  <span class="checkout">
    <a class="btn btn-shopping-cart" href="#"><i class="fa fa-shopping-cart fa-2x"></i></a>
   </span>
</div>

这完全取决于影响它的样式，但是将 display: inline-block 放在 span 上可能会解决问题