Question

我想要完成的是将div中的所有元素保留在一行中，无论有多少：

<div class="col-sm-9 items">
    <div class="item">
        <div class="image pull-left">
            <img class="img-responsive" alt="a" src="images/product.png">
        </div>

        <div class="text pull-left">
            <p>Lorem Ipsum Dolor consecteur </p>
            <p>$79/QUANTITY: 1</p>
            <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6>
        </div>
    </div>

    <div class="item">
        <div class="image pull-left">
            <img class="img-responsive" alt="a" src="images/product.png">
        </div>

        <div class="text pull-left">
            <p>Lorem Ipsum Dolor consecteur </p>
            <p>$79/QUANTITY: 1</p>
            <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6>
        </div>
    </div>

    <div class="item">
        <div class="image pull-left">
            <img class="img-responsive" alt="a" src="images/product.png">
        </div>

        <div class="text pull-left">
            <p>Lorem Ipsum Dolor consecteur </p>
            <p>$79/QUANTITY: 1</p>
            <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6>
        </div>
    </div>

    <div class="item">
        <div class="image pull-left">
            <img class="img-responsive" alt="a" src="images/product.png">
        </div>

        <div class="text pull-left">
            <p>Lorem Ipsum Dolor consecteur </p>
            <p>$79/QUANTITY: 1</p>
            <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6>
        </div>
    </div>

    <div class="item">
        <div class="image pull-left">
            <img class="img-responsive" alt="a" src="images/product.png">
        </div>

        <div class="text pull-left">
            <p>Lorem Ipsum Dolor consecteur </p>
            <p>$79/QUANTITY: 1</p>
            <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6>
        </div>
    </div>
</div>

这是HTML，其中items是容器，item是我需要的元素。

#shop {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
}

#shop .items {
    overflow: auto;
    height: 150px;
    white-space: nowrap;
}

#shop .item {
    margin: 20px 0;
    float: left;
    display: inline;
}

#shop .item .image {
    border-radius: 5px;
    display: inline-block;
    padding: 10px;
    width: 40%;
}

#shop .item .image img {
    margin: auto;
}

#shop .item .text {
    display: inline-block;
    width: 60%;
    padding: 5px 10px;
}

#shop .button {
    width: 100%;
    padding: 7px;
    margin: 5px 0;
}

#shop .cart {
    padding-left: 55px;
    margin: 5px 0;
    float: left;
}

#shop .cart .sep {
    height: 3px;
    margin-bottom: 5px;
}

这是关于所述元素的CSS。

Answer 1

删除每个项目的float并使用inline-block：

#shop .item {
  margin: 20px 0;
  /*float: left; Remove this*/
  display: inline-block; /*Add this*/
}

Answer 2

http://jsfiddle.net/4d64z/

我的工作接近你想要的方式。

我为某些元素添加了一些float: left;，为某些元素添加了display: inline;或display: inline-block;

#shop {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    float: left;
    display: inline-block;
}

p {
    display: inline;
    float: left;
}
#shop .items {
    overflow: auto;
    height: 150px;
    white-space: nowrap;
}

#shop .item {
    margin: 20px 0;
    float: left;
    display: inline;
}

#shop .item .image {
    border-radius: 5px;
    display: inline-block;
    padding: 10px;
    width: 40%;
}
h6 { display: inline; float: left; }

#shop .item .image img {
    margin: auto;
}

#shop .item .text {
    display: inline-block;
    width: 60%;
    padding: 5px 10px;
}

#shop .button {
    width: 100%;
    padding: 7px;
    margin: 5px 0;
}

#shop .cart {
    padding-left: 55px;
    margin: 5px 0;
    float: left;
}

#shop .cart .sep {
    height: 3px;
    margin-bottom: 5px;
}

Answer 3

如果我理解正确，您的意思是您希望在同一行上有以下3个标签;

<p>Lorem Ipsum Dolor consecteur </p>
<p>$79/QUANTITY: 1</p>
<h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6>

您可以直接在这些标签上应用浮动

<p>Lorem Ipsum Dolor consecteur </p>
<p class="aClass">$79/QUANTITY: 1</p>
<h6 class="blue aClass">Clear <i class="fa fa-times-circle-o"></i></h6>

CSS看起来像这样

#shop .aClass{
    float: left;
}

Answer 4

您可以考虑使用<div>标记，而不是使用<span>标记。它们基本相同（尽管还有其他一些差异），但<div>主要用于大型块式划分，<span>用于内联元素。

div中的所有元素都在一行上

4 个答案: