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

Question

我对网络开发还很陌生。我在这个问题上苦苦挣扎了一段时间。现在我 post 我的问题在这里。

源代码如链接：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 个基于链接（或以上）代码的问题。

第 5 个容器 div 的宽度设置为： .itemnumber 6%、.userprofile 14%、.nameandcredit 45%、.ranktitle 15%、.usercredit 20%。所以 他们总共是 100%。但是如你所见，最后一个 .usercredit 不在同一行并且每个 div 之间有边距，这不是我想要的
对于.username，我设置了overflow:hidden，但是如您所见，当字符串很大时，.username 完全消失了。如果字符串中有空格，它只会隐藏溢出部分并显示前面的部分。我想知道是什么问题？

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

Answer 1

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

inline-block 元素和
为带有填充的元素定义宽度。

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

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

让我们逐一看看：

隐式空格

问题是您的 div 具有 display: inline-block; 样式。显示为 inline-block 的元素之间有任何白色-space 转换为单个 space.

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

例如，一个解决方法是让 li 元素包装 div 的字体大小为 0，并为其子项重置非零字体大小，例如在你的 CSS:

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

上面 link 中概述的任何 link 都可以；例如，删除结束标记和开始标记之间的 space 和换行符会做同样的事情，而不会强制您设置和重置 font-size.

带填充的元素的宽度

在 CSS 中，默认情况下为元素定义 width 以仅包含其内容区域（默认为 box-sizing: content-box;）而不包含填充。将 box-sizing 设置为 border-box，一切就绪。

例如

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

在没有 spaces

的情况下正确换行单个单词

请参阅 this Whosebug answer 了解如何解决该问题。您基本上需要将此添加到您的 .username 规则中：

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

Final Result jsFiddle

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

5 divs in one row, can't align them in one line

html

css

responsive-design