0

在此处输入图像描述如何使第二个 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>
4

2 回答 2

0

你的小提琴真的很忙，我找不到它的确切位置，但这与你的边距和宽度有关。您应该将包装器设置为您想要<div>的固定宽度，并确保s 宽度加起来等于包装器宽度，包括边距和任何填充。请参阅这篇文章以获得很好的解释。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>
于 2013-02-15T20:27:43.037 回答
0

首先，正如凯文在评论中所说，你的 html 是错误的。您有一个 div 嵌套在另一个 div 中。修复它，然后将 inline-block 应用于第二个 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>

这是强制性的小提琴

于 2013-02-15T20:25:17.333 回答