css - 一行 5 个 div，无法将它们排成一行

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 完全消失了。如果字符串中有空格，它只会 overflow hidden 部分并显示前面的部分。我想知道是什么问题？

我知道这里有很多代码有点乱。但我的问题如上所述。在此先感谢您提出任何建议。

Answer 1

对于间距，你有两个问题:

1. inline-block 元素之间的隐式空格，以及
2. 为带填充的元素定义宽度。

关于用户名溢出，您有一个问题:

1. 默认的自动换行行为是将整个单词换行到下一行。你需要改变这种行为。

让我们来看看它们中的每一个:

---

隐式空格

问题在于您的 div 具有 display: inline-block; 样式。显示为 inline-block 的元素会将它们之间的任何空白转换为单个空格。

See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks有关如何克服此问题的更多信息。

例如，一个解决方法是让包装 div 的 li 元素具有 0 字体大小，并重置非零字体它的 child 的大小，例如在你的 CSS 中:

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

上面链接中列出的任何链接都可以使用；例如，删除结束标记和开始标记之间的空格和换行符会做同样的事情，而不会强制您设置和重置 font-size。

---

带内边距的元素的宽度

在 CSS 中，宽度 被默认定义为一个元素只包括它的内容区域(box-sizing: content-box; 默认)而不是填充。将 box-sizing 设置为 border-box，一切就绪。

例如

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

---

在没有空格的情况下正确包装单个单词

参见 this StackOverflow answer看看如何解决这个问题。您基本上需要将此添加到您的 .username 规则中:

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

---

Final Result jsFiddle