显示内联而不使div向上移动

Question

如何使第二个div与第一个div正确对齐.... 我给出了水平对齐的显示内联... 但第二个div还在下降...... 我正在谈论24英寸显示器......

http://jsfiddle.net/ke6Se/1/embedded/result/

<div style=" width: 300px; display: inline-block;">
                  <span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
                  <div>
                    <span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
                  </div>
                </div>

Answer 1

首先，正如凯文在评论中所说，你的HTML是错误的。你有一个div嵌套在另一个里面。修复该问题，然后将内联块应用于第二个div

<div style=" width: 300px; display: inline-block;">
   <span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
</div> 
<div style="display:inline-block">
    <span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
</div>

Here's the obligatory fiddle

Answer 2

你的小提琴真的很忙，我找不到它的确切位置，但它与你的边距和宽度有关。您应该将包装器<div>设置为固定宽度，然后将float: right设置为所需的<div>，并确保<div>的宽度与包装器宽度相加，包括边距和任何宽度填充。请参阅此文章以获得良好的展示。

http://www.webdesignerdepot.com/2012/09/when-pages-are-not-paper-the-designers-guide-to-layout-code/

如果您不想设置静态宽度，也可以设置最小宽度以防止在缩小窗口时堆叠div。

以下是我正在谈论的快速HTML标记。

<div id="wrapper" style="width: 800px;">
    <div id="leftDiv" style="width: 600px; float: left;">
        I'm the left Div!
    </div>
    <div id="rightDiv" style="width: 200px; float: right;">
        I'm the right Div!
    </div>
</div>