Question

我试图将div中的div元素转换为内联，但它没有按预期工作。

代码：

HTML

<div id="price-results">
    <div id="price"><div>Unit Price</div><div>5</div></div>
    <div id="qty"><div>Quantity</div><div>2</div></div>
    <div id="total"><div>TotalPrice</div><div>10</div></div>
</div>

CSS

 #price,#qty{
        display:inline
    }

JSFiddle

Answer 1

我同意comment before。

除此之外，您的CSS需要像这样定位容器内部：



    #price div,
    #qty div,
    #total div{
        display:inline
    }

...请参阅此fixed jsFiddle。

关于HTML + CSS的其他一些注意事项：

您应该考虑使用类而不是ID
你也可以通过单个后代规则（jsFiddle）



    #price-results > div div {
        display:inline
    }

Answer 2

更新您的css，如下所示

#price, #qty{
display:inline-block;
}

Answer 3

为什么不使用float:left代替display:inline

以下是demo

Answer 4

为什么不必要地嵌套这么多div。在div中包含每个元素并不是强制性的。这很好用： -

<div id="price-results">
<div id="price">Unit Price 5</div>
<div id="qty">Quantity 2</div>
<div id="total">TotalPrice 10</div>
</div>

http://jsfiddle.net/qqTDq/2/

Answer 5

 *,div{
   padding:0;
   margin:0;
   display:inline;
  }

 #price,#qty{
     display:inline;
     border:1px solid red;
 }

Answer 6

默认情况下，DIV是块级元素。我会将内部DIV切换到SPAN，默认情况下是内联的：

<div id="price-results">
    <div id="price"><span>Unit Price</span> <span>5</span></div>
    <div id="qty"><span>Quantity</span> <span>2</span></div>
    <div id="total"><span>TotalPrice</span> <span>10</span></div>
</div>

如果您打算对齐数字，那么我会切换到table。

Answer 7

 #price-results div{
        display:inline
    }

Answer 8

使用 inline-flex ：

#price, #qty
{
display:inline-flex;
}

将div中的div转换为内联

8 个答案: