Letzte span in div ändert seine Breite

Question

So habe ich ein div mit 7 Spannen - jedes Datum zu beschreiben. Die letzte Spanne verhält sich seltsam, sie hat eine andere Breite, sie ist in gewisser Weise umgebrochen, aber sie hat freien Platz: /. 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

Sie haben die Breite des div-800px gesetzt und es sieht aus wie Ihre span Tags werden mehr Platz als diese zu besetzen und damit die letzte Spanne verursacht auf eine andere wickeln "Linie" sozusagen. Versuchen Sie, die Eigenschaft auf min-width zu ändern, wenn das ist, was Sie suchen, oder geben den span Tags ein width: calc(100%/7) Tag

Answer 2

entweder entfernen Sie die Höhe des Behälterelements .mc-dates-bar so kann es in Höhe erstrecken oder machen die font-size von .mc-single-date kleiner, so sie kann passen oder machen den Behälter .mc-dates-bar mehr als 800px

Sie versuchen, viele Elemente in einem kleinen Behälter zu passen, nicht möglich

Answer 3

Wenn Sie Eltern div Element platziert werden sollen zum Zentrum und Ihr Kind all span Elemente (7 in diesem Beispiel) passen zu div mit gleichen Breiten Ihre CSS-Code wird wahrscheinlich so aussehen.

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

Es besteht keine Notwendigkeit für margin-left in diesem Fall. Nach Eingabe dieses Css-Codes sitzt jedes einzelne span Element, das Sie mit der gleichen Klasse hinzufügen, elegant auf div.

Answer 4

Fügen Sie no-wrap zu Ihrer Spannweite hinzu. wie 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; 
}