Question

所以我有一个有7个跨度的div - 每个描述日期。最后的跨度表现奇怪，它有不同的宽度，它在某些方面包裹，但它有自由空间：/。 Here is pic of how it looks

.mc-dates-bar
{
    margin-left: 60px;
    width: 800px;
    height: 30px;
}

.mc-single-date
{
    font-weight: bold;
    font-family: sans-serif;
    color: $denim;
    font-size: 18px;
    margin-left: 15px;
}

 <div className="mc-dates-bar">
                <span className="mc-single-date">{moment(dates[0]).format("D MMM")}</span>
                <span className="mc-single-date">{moment(dates[1]).format("D MMM")}</span>
                <span className="mc-single-date">{moment(dates[2]).format("D MMM")}</span>
                <span className="mc-single-date">{moment(dates[3]).format("D MMM")}</span>
                <span className="mc-single-date">{moment(dates[4]).format("D MMM")}</span>
                <span className="mc-single-date">{moment(dates[5]).format("D MMM")}</span>
                <span className="mc-single-date">{moment(dates[6]).format("D MMM")}</span>
            </div>

Answer 1

您已将div的宽度设置为800px，看起来您的span标记占用的空间比此更多，因此导致最后一个跨度换行到另一个'线'可以这么说。尝试将属性更改为min-width，如果这是您要查找的内容，或者为span代码添加width: calc(100% / 7)代码

Answer 2

移除容器元素.mc-dates-bar的高度，使其可以在高度上延伸或使font-size .mc-single-date更小，以便它们适合或使容器.mc-dates-bar超过800px

你试图在一个小容器中装入很多元素，这是不可能的

Answer 3

如果您想将父div元素置于居中位置，并且您的所有子span元素（本例中为7）适合宽度相等的div，则您的css代码可能看起来像此

div.parentDiv {
    position:relative;
    margin:0 auto; 
    /*height: 30px;*/
    min-width:700px;
    max-width:90%;
}
span.childSpan {
    float:left;
    width:calc(100%/7);
    box-sizing:border-box; 
    text-align: center;
    /*font-weight: bold;
    font-family: sans-serif;
    color: $denim;
    font-size: 18px;*/
}

在这种情况下，不需要margin-left。输入此css代码后，您使用同一个班级添加的每个span元素都会优雅地位于div。

Answer 4

将no-wrap添加到您的范围内。例如https://codesandbox.io/s/1rzongZL3。

.mc-single-date
{
    font-weight: bold;
    font-family: sans-serif;
    color: $denim;
    font-size: 18px;
    margin-left: 15px;
    white-space: nowrap;
}

div中的最后一个跨度改变了它的宽度

4 个答案: