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;
}

我有两个基于链接（或上面）代码的问题。

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的元素在它们之间有任何空格转换为单个空格。

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

li

div

.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

一行5个div，不能将它们排成一行

1 个答案: