顯示內聯不使div向上移動

enter image description here 如何使第二個div正確對齊第一個div .... 我給顯示內聯水平對齊... 但第二個div仍然下降.. 。我與對於24寸顯示器說話....顯示內聯不使div向上移動

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>

來源

2013-02-15 user2045025

第二個'div'？你的意思是嵌套'div'？如果是這樣，這個代碼將不會像你期望的那樣工作。 – 2013-02-15 20:17:15

顯示器尺寸無關緊要，分辨率問題，像素數量。除非你知道你的所有用戶將在1080p高清屏幕上，否則我會建議你計劃1024分辨率。 – defaultNINJA 2013-02-15 20:42:35

首先，凱文在他的評論中說，你的HTML是錯誤的。你有一個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>

Here's the obligatory fiddle

來源

2013-02-15 20:25:17

你的小提琴是真的很忙，我不能確切地找到它在哪裏，但它與你的利潤和寬度做。你應該設置一個包裝<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>

來源

2013-02-15 20:27:43 defaultNINJA

顯示內聯不使div向上移動

回答

相關問題