問題與div對齊

-1

我不是很好的HTML和CSS所以我使用的模板，但無論我知道我嘗試使用它。問題與div對齊

這裏的問題是http://i53.tinypic.com/dmw6yt.jpg

的形象，你可以看到用戶測試實際上是一個新的生產線。這不是它應該如此。它應該與此文本「用戶X的帳戶統計信息」位於同一行。

我用的HTML和CSS是

<div class="user">Account stats for user<div class="info">test</div></div> 

div.user 
{ 
    font-size: 13px; 
    text-align: center; 
} 

div.info 
{ 
    font-size: 18px; 
}

來源

2011-09-15 dikidera

這個Q可能會得到大多數相同答案的獎勵 – Kelly

如果您自動希望它在同一行上，我建議使用<span>來代替。

<span class="user">Account stats for user</span><span class="info">test</span>

如果你確實需要使用的div則：

<div class="user">Account stats for user</div><div class="info">test</div>

隨着CSS：

div.user 
{ 
    font-size: 13px; 
    text-align: center; 
} 

div.info 
{ 
    font-size: 18px; 
    float:left; 
}

來源

2011-09-15 15:12:17 f0x

使用內聯元件<span>代替塊元件<div>

內聯元件是用於與要顯示在同一行上，然後下降等文本元素當沒有足夠的空間時，將其放在之前的內聯元素下方。塊元素旨在用於網站的結構。

來源

2011-09-15 15:11:28 BumbleB2na

要麼使用<span class="info">代替<div>，或者使用這些CSS：

div.info 
{ 
    font-size: 18px; 
    display: inline-block; 
}

通常你應該更喜歡使用span，但有幾種情況（例如，如果你想指定元素的寬度）需要div。就你的情況而言，請使用span。

來源

2011-09-15 15:11:47 Jon

這是因爲DIV會自動分配一個新的生產線，因爲它是一個「塊級」元素。在這種情況下，我會將<div>替換爲<span>，因爲這些是內聯元素。

您也可以使用<div>上的CSS屬性display:inline來覆蓋此行爲。

來源

2011-09-15 15:12:48

試試這個：

div.user 
{ 
font-size: 13px; 
text-align: center; 
display: inline; 
} 

div.info 
{ 
font-size: 18px; 
}

我認爲這會做的伎倆。

來源

2011-09-15 15:12:57 Akos

您可以添加'display：inline;'給他們，它應該工作。

或者你可以把它們都浮在左邊，也可能工作。 'float：left;'

來源

2011-09-15 15:13:10 Hanny

你把「測試」一詞放在新的div中。這意味着這個詞將在新的一行。嘗試使用span或class或id而不是div。如果你真的想用DIV單詞「測試」，你可以指定float屬性或內嵌顯示

<div class="user">Account stats for user<span class="info">test</span></div> 


.info 
      { 
      margin-left: 10px; 
      font-size: 18px; 
      }

來源

2011-09-15 15:14:51 George

把這個div.info

display: inline;

裏面所以你的div.info類應該看像這樣

div.info 
{  
font-size: 18px; 
display: inline; 

}

來源

2011-09-15 15:14:59 Jayy

問題與div對齊

回答

相關問題