divの最後のスパンが幅を変更します

Question

だから私は7スパンで1つの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

あなたは800pxにdivの幅を設定したし、あなたのspanタグがこれより多くのスペースを占有するため、別の上にラップする最後のスパンを引き起こしているように見えます'ライン'なので話す。それはあなたが探しているものかどうmin-widthにプロパティを変更してみてください、またはspanタグに

Answer 2

をwidth: calc(100%/7)タグを与えるいずれかのコンテナ要素.mc-dates-barの高さを取り除くので、それほどの高さに拡張したり.mc-single-dateのfont-sizeを小さくすることができます彼らは、フィットや 800ピクセル

あなたが中央に親div要素を配置したい場合は

Answer 3

ことができない、小さなコンテナ内の要素の多くに合うようにしようと、すべてのあなたの子供の01されているよりも.mc-dates-bar以上の容器を作ることができます要素（この例では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; 
}