5行在一行中，無法將它們排成一行

Question

我在網絡開發方面很新穎。我一直在努力解決這個問題。現在我在這裏發佈我的問題。

該烴源代碼爲鏈接：Source Code

的HTML：

<div id="wrap"> 
     <div id="main" class="clearfix"> 

     <ul class="ranklist" id = "ranklist"> 
     <li class="ranklistitem font-size-0"> 
     <div class="itemnumber divinline"> <span class="helper"></span>1</div> 
     <div class="userprofile divinline"><img class="profileimg" src=""/></div> 
     <div class="nameandcredit divinline"> 
      <div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div> 
      <div class="credit">I'm description</div> 
     </div> 
     <div class="ranktitle divinline">Total:</div> 
     <div class="usercredit divinline">1000</div> 
     </li> 
     </ul> 
    </div> 
</div> 

的CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    height: 100%; 
} 
html { 
    background: #aaaaaa;  
} 

body { 
    -webkit-user-select: none; /* Chrome/Safari */ 
    -moz-user-select: none; /* Firefox */ 
    -ms-user-select: none; /* IE10+ */ 
    font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei"; 
    font-weight: lighter; 
} 
#wrap { 
    min-height: 100%; 
} 
#main { 
    overflow-y: auto; 
    padding-bottom: 55px; 
} 

div, ul, p { 
    padding: 0px; 
    margin: 0px; 
    color: #ffd8d0; 
} 

.rewarddes 
{ 
    margin-top:10px; 
    display:block; 
    color:#ffdcc5; 
    overflow:hidden; 
    font-size:87.5%; 
} 
.ranklistitem { 
    height: 60px; 
    border-bottom: solid 1px #faa559; 
    font-size:87.5%; 
} 
.font-size-0 { 

} 
.divinline { 
    display: inline-block; 
    vertical-align: top; 
    padding: 0px; 
    margin: 0px; 
} 
.helper { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
.itemnumber { 
    line-height: 60px; 
    height: 60px; 
    background:#aa8800; 
    width: 6%; 
    text-align: right; 
    padding-right: 5px; 
} 
.userprofile { 
    line-height: 60px; 
    height: 60px; 
    width: 14%; 
    text-align: center; 
    vertical-align: middle; 
    background:#228845; 
} 
.profileimg { 
    height: 36px; 
    width: 36px; 
    vertical-align: middle; 
    border-top-left-radius: 50%; 
    border-top-right-radius: 50%; 
    border-bottom-left-radius: 50%; 
    border-bottom-right-radius: 50%; 
    border: solid 2px #fff; 
} 
.nameandcredit { 
    height: 60px; 
    width: 45%; 
    padding-left: 5px; 
    background:#342389 
} 
.username { 
    height: 55%; 
    text-align: left; 
    vertical-align:bottom; 
    overflow:hidden; 
} 
.credit { 
    height: 25%; 
    font-size: 66.7%; 
    text-align: left; 
    overflow:hidden; 
    color:#fdff6e; 
} 

.username:before, .credit:after { 
    content:''; 
    height:100%; 
    vertical-align:middle; 
    display:inline-block; 
} 

.iconaward { 
    vertical-align: middle; 
    height: 20px; 
    width: 14px; 
} 
.ranktitle { 
    line-height: 60px; 
    height: 60px; 
    width: 15%; 
    background:#cd8912; 
    text-align: right; 
    padding-right: 0.125em; 
} 
.usercredit { 
    line-height: 60px; 
    height: 60px; 
    background:#ff0000; 
    width: 20%; 
    text-align: right; 
    padding-right: 0.5em; 
} 

我有基於鏈接（或以上）代碼2個問題。

1. 5容器div的寬度被設置爲： .itemnumber 6％，.userprofile 14％，.nameandcredit 45％，.ranktitle 15％，.usercredit 20％。所以總共是100％。但正如你所看到的，最後一個.usercredit不在同一行，每個div之間都有餘量，這不是我想要的。

2. 對於.username，我設置了overflow:hidden，但正如你所看到的，當有一個大字符串時，.username完全消失了。如果字符串中有空格，它只會隱藏溢出部分並顯示前部分。我想知道有什麼問題？

我知道這裏有很多亂碼。但我的問題如上所列。在此先感謝您提供任何建議。

Answer 1

對於間距，你有兩個問題：inline-block元素之間

1. 隱空間，
2. 定義寬度與填充元素。

關於用戶名溢出，你有一個問題：

默認自動換行的行爲是整個單詞換到下一行。你需要改變這種行爲。

讓我們來看看他們每個人：

---

隱空間

的問題是，你的div■找一個display: inline-block;風格。顯示爲inline-block的元素之間有任何空白轉換爲單個空間。

See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks有關如何解決此問題的更多信息。

例如，一種修復方法是讓包裝div的li元素的字體大小爲0，併爲其子項重置非零字體大小。在您的CSS中：

.font-size-0 { 
    font-size: 0; 
} 
.font-size-0 > * { 
    font-size: 12px; 
} 

上述鏈接中概述的任何鏈接都可以使用;例如，刪除結束標記和開始標記之間的空格和換行符將執行相同的操作，而不會強制您設置和重置font-size。

---

寬度與填充

在CSS元素，一個width默認情況下定義的元素僅包括其內容區域（box-sizing: content-box;默認情況下），而不是填充。將box-sizing設置爲border-box，您將完成設置。

E.g.

.font-size-0 > div { 
    box-sizing: border-size; 
} 

---

妥善包裝不帶空格

一個字見this StackOverflow answer來看看如何解決這個問題。您將基本上需要添加到您的.username規則：

.username { 
    ... 
    word-wrap:break-word; 
} 

---

Final Result jsFiddle