如何让div内容彼此相邻

I want my div contents to be next to each other but they are being displayed under each other.

我希望我的div内容彼此相邻,但它们正在彼此之下显示。

This div is aligned right and is part of the navigation bar div. I tried using float left for text but no improvements were made.

此div对齐,是导航栏div的一部分。我尝试使用float left for text但没有进行任何改进。

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

Result:

SIGN-IN
or
REGISTER
Check-out icon

登录或注册结帐图标

Whereas I want:

我想要的是:

SIGN-IN or REGISTER checkout icon

登录或注册结帐图标

3 个解决方案

#1

Looks like some other CSS you have in your code is affecting your styles. Putting in just your html renders as you expect it to render

看起来您的代码中的其他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>

It all depends on what styles are affecting it, but putting display: inline-block on the spans may fix things for you

这一切都取决于影响它的样式,但是在跨度上放置display:inline-block可能会为你解决问题

#2

In order for float to work the div has to have position: relative attribute or position: static. Also only DIVs that have these set are affected by the flow of document.

为了使float工作,div必须具有position:relative属性或position:static。此外,只有具有这些设置的DIV会受到文档流的影响。

If you put all your divs which you want to be ordered towards right/left side with these properties:

如果您将所有想要订购的div放在右侧/左侧,请使用以下属性:

position:relative;
float: right;

they should automatically fit in.

他们应该自动适应。

#3

You can use:

您可以使用:

div {
     display: inline-block;
}

#1