最後跨度div的變化它的寬度

所以我有一個與7跨度的div - 每個描述日期。最後一個跨度的表現很奇怪，它具有不同的寬度，它以某種方式換行，但它具有可用空間：/。 Here is pic of how it looks 最後跨度div的變化它的寬度

.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>

來源

2017-07-15 Tomasz Poneta

嘗試在'％'中使用'width'而不是固定'800px'，可能是它可以解決您的問題 –

你設置了div的寬度800px，它看起來像你的span標籤比這佔用空間比較大，因此造成了最後的跨度換到另一可以這麼說。嘗試改變屬性min-width如果這就是你要找的內容，或給span標籤一個width: calc(100%/7)標籤

來源

2017-07-15 12:55:23 Keydose

或者刪除容器元素.mc-dates-bar的高度，以便它可以在高度上延伸或使.mc-single-date較小的font-size所以他們能夠適應或使.mc-dates-bar超過800像素

你正在試圖將很多元素在一個小容器，不可能

來源

2017-07-15 13:06:46 kapreski

如果你想放置父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上。

來源

2017-07-15 13:32:38

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

來源

2017-07-15 14:07:36

最後跨度div的變化它的寬度

回答

相關問題