CSS中的div內的塊元素

我試圖讓2個div出現在外部div內的單獨行中。現在我爲它們設置了display:inline-block，但我不確定如何更改此設置，以使它們顯示在不同的行上。CSS中的div內的塊元素

這裏是我的代碼如下現在，我想李四和100至leader專區內單獨行上出現：

HTML

<ul> 
    <li class="leader"> 
     <div class="ranking">1</div> 
     <div class="name">John Doe</div> 
     <div class="score">100</div> 
    </li> 
</ul>

CSS

.leader { 
    border: 1px solid; 
    background-color: #E6E6E6; 
    display: inline-block; 
    width: 400px; 
    margin: 2px; 
    padding: 2px; 
    background-repeat: no-repeat; 
    height: 75px; 
} 

.ranking { 
    display: inline-block; 
    margin:2px; 
    padding:2px; 
    width:50px; 
    height:65px; 
    background-color:green; 
    color:white; 
} 

.name { 
    display: inline-block; 
} 

.score { 
    display: inline-block; 
}

來源

2013-08-01 user2066880

做div的。名稱和.score必須有inline-block的？ –

'inline-block'並不意味着「塊內的塊」，以防您從名稱推斷出來。它只是意味着它主要表現爲塊元素，但不會佔用更多的寬度，因此它們保持在同一行中。 – UweB

最快的解決方案是將排名設置爲「float：left;」和「display：block;」的名稱和分數。塊級元素默認跨度爲100％，這將確保2個元素位於單獨的行上。

.leader { 
    border: 1px solid; 
    background-color: #E6E6E6; 
    display: inline-block; 
    width: 400px; 
    margin: 2px; 
    padding: 2px; 
    background-repeat: no-repeat; 
    height: 75px; 
    } 

.ranking { 
    float:left; 
    margin:2px; 
    padding:2px; 
    width:50px; 
    height:65px; 
    background-color:green; 
    color:white; 
} 

.name { 
    display: block; 
} 

.score { 
    display: block; 
}

http://jsfiddle.net/ZnuPR/2/

來源

2013-08-01 19:27:45 jeff

你可以刪除「display：block;」從.name和.score開始，它仍然看起來一樣。 – heytools

良好的電話heytools感謝您的抓住:) – jeff

我認爲這是你的意思：

http://jsfiddle.net/ZnuPR/6/

不要使用inline-block，並從包裝箱中取出height，它會自動調整到它需要的高度。

來源

2013-08-01 19:24:26 Jacques

您可以簡單地浮動.ranking，然後將.name和.score作爲display: block。

http://jsfiddle.net/ZnuPR/7/

.ranking { 
    /* ... */ 
    float: left; 
}

來源

2013-08-01 19:25:03

我無法弄清楚他是否想要這樣或這樣的：http://jsfiddle.net/ZnuPR/6/ - 無論哪種方式，很好的答案：D – Jacques

http://jsfiddle.net/ZnuPR/8/

增加了.details包裝和一些浮動。

.ranking { 
    float:left; /* Floating */ 
    margin:2px; 
    padding:2px; 
    width:50px; 
    height:65px; 
    background-color:green; 
    color:white; 
} 
.details { 
    float:left; /* floating */ 
} 

.name { 
    display: block; /* Changed to block */ 
} 

.score { 
    display: inline-block; 
} 

<ul> 
    <li class="leader"> 
     <div class="ranking">1</div> 
     <div class="details"> 
      <div class="name">John Doe</div> 
      <div class="score">100</div> 
     </div><!-- end details wrapper--> 
    </li> 
</ul>

來源

2013-08-01 19:25:23

我想這可能是有用的：

http://jsfiddle.net/ZnuPR/10/

.leader { 
    border: 1px solid; 
    background-color: #E6E6E6; 
    display: inline-block; 
    width: 400px; 
    margin: 2px; 
    padding: 2px; 
    background-repeat: no-repeat; 
} 

.ranking { 
    width: 100%; 
    margin:2px; 
    padding:2px; 
    width:50px; 
    height:65px; 
    background-color:green; 
    color:white; 
} 

.name { 
    width: 100%; 
} 

.score { 
    width: 100%; 
}

來源

2013-08-01 19:28:30 amatellanes

這是我做過什麼：

CSS

.leader { 
     border: 1px solid; 
     background-color: #E6E6E6; 
     display: inline-block; 
     width: 400px; 
     margin: 2px; 
     padding: 2px; 
     background-repeat: no-repeat; 
} 

.ranking { 
    display: inline-block; 
    margin:2px; 
    padding:2px; 
    width:50px; 
    height:65px; 
    background-color:green; 
    color:white; 
}

我擺脫display: inline-block和height

來源

2013-08-01 19:30:51

CSS中的div內的塊元素

回答

相關問題