Jan und Feb sind Elemente, die direkt zu HTML hinzugefügt werden. Mar bis Dec sind Elemente, die von js generiert werden. Ich habe mich gefragt, warum sich der Stil von Jan und Feb von dem von Javascript unterscheidet.

var monthsElement = document.getElementsByClassName("months")[0]
var monthList = ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
for (var month in monthList) {
    var newMonth = document.createElement("span")
    monthsElement.appendChild(newMonth)
    newMonth.setAttribute("class","month-hover")
    newMonth.innerHTML = monthList[month]
   

}
.month-hover:hover{
  
  color:#27e779 !important;
  
}

.months {
  color: #AAAAAA;
  position: relative;
  left: 350px;
  top: 90px;
  word-spacing: 10px;
}
<body>
    <div class="calendar-base">
        <div class="months">
            <span class="month-hover">Jan</span>
            <span class="month-hover">Feb</span>
            
        </div>
    </div>
</body>
4
ahhfzrx 17 Apr. 2018 im 21:32

3 Antworten

Beste Antwort

word-spacing ist ein Stil für Absätze <p>. In diesem Fall müssen Sie entweder padding verwenden oder Ihren gesamten Text in einem Tag anhängen.

Hoffe das hilft :)

var monthsElement = document.getElementsByClassName("months")[0]
var monthList = ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
for (var month in monthList) {
    var newMonth = document.createElement("span")
    monthsElement.appendChild(newMonth)
    newMonth.setAttribute("class","month-hover")
    newMonth.innerHTML = monthList[month]
   

}
.month-hover:hover{
  color:#27e779 !important;
}
.month-hover{
  padding:0 7px;
}

.months {
  color: #AAAAAA;
  position: relative;
  left: 350px;
  top: 90px;
}
<body>
    <div class="calendar-base">
        <div class="months">
            <span class="month-hover">Jan</span>
            <span class="month-hover">Feb</span>
        </div>
    </div>
</body>
3
Gerardo BLANCO 17 Apr. 2018 im 18:41

Wenn ich das resultierende HTML in den Editor kopiere, sieht es so aus, sieht aus wie ein Leerzeichen:

<div class="months">
            <span class="month-hover">Jan</span>
            <span class="month-hover">Feb</span>

        <span class="month-hover">Mar</span><span class="month-hover">Apr</span><span class="month-hover">May</span><span class="month-hover">Jun</span><span class="month-hover">Jul</span><span class="month-hover">Aug</span><span class="month-hover">Sept</span><span class="month-hover">Oct</span><span class="month-hover">Nov</span><span class="month-hover">Dec</span></div>
2
Stradosphere 17 Apr. 2018 im 18:36

Dies kann auch durch Änderungen in JS erfolgen

newMonth.innerHTML = monthList[month].concat(" ");
1
Rahul Parihar 17 Apr. 2018 im 19:12