Textausrichtung: rechts; behalten Sie einen Rand, egal was ich versuche

Ich habe diesen einfachen Code, der den Wochentag, die Uhrzeit und das Datum anzeigt. Der Text sollte rechts ausgerichtet sein, wie in der CSS angegeben, aber ich weiß nicht, warum es sich nicht auf der rechten Seite des Bildschirms (ohne den Rand) fest, es immer einen großen Abstand zwischen der Seite der Fenster und sich selbst.Textausrichtung: rechts; behalten Sie einen Rand, egal was ich versuche

https://jsfiddle.net/czh9cam6/

<div class="droite" id="time" > 
</div> 

#time{ 
    text-align: right; 
    display:table-cell; 
} 

.droite{ 
    width: 73%; 
    display:table-cell; 
    vertical-align:middle; 
}

Quelle

2016-11-22 Ezhno

Verwenden Sie Ihre Browser-Entwickler-Tools. Es gibt einen Rand auf "# aszone" und den Körper selbst. –

@KilianStinson Ich habe tatsächlich eine Marge von 20px auf jeder Seite der ASzone, aber wie Sie wahrscheinlich bemerkt haben, ist der Rand auf der rechten Seite viel höher als 20px. Das ist der Punkt, den ich nicht verstehe – Ezhno

Es ist nicht der Rand, es ist die Breite des Tisches. Sie können die Breite von 'aszone' auf' calc (100% - 40px) 'setzen (40px reicht für die doppelte Marge) und es würde funktionieren. Sie können auch 'display: table' wie unten vorgeschlagen entfernen. – oboer

entfernen display: table; in #aszone und fügen float: left und float: right-.gauche und .droite sind.

https://jsfiddle.net/qsdtfztf/

Quelle

2016-11-22 07:42:25

Danke Roger, das ist, was ich gesucht habe .. tho der Text ist nicht mehr vertikal ausgerichtet in meinem div, wie kann ich das beheben? – Ezhno

Wenn Sie die genaue Höhe kennen, können Sie die 'line-height' des Textelements auf die gleiche Höhe wie die des Containers setzen. http://jsfiddle.net/qj40hfvd/ –

Viele browers haben Stil Standard, genauso wie es um das Körperelement in Chrom immer 8px Marge ist. Sie sollten also den Standard-Stil löschen.

Quelle

2016-11-22 07:38:09 tomasran

Sie müssen keine display:table-cell Eigenschaft in Ihrem Code hinzufügen. Entfernen Sie einfach diese Eigenschaft ... Dann wird es Margin wie pro Anforderung. Kasse Ihre Antwort:

(function() { 
 
    function checkTime(i) { 
 
     return (i < 10) ? "0" + i : i; 
 
    } 
 

 
    function startTime() { 
 
     var months = [ 'Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ], 
 
      days = [ 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi' ] 
 
    
 
     var today = new Date(), 
 
      d = today.getDay(), 
 
      f = today.getDate(), 
 
      m = today.getMonth(), 
 
      y = today.getFullYear(), 
 
      
 
      h = checkTime(today.getHours()), 
 
      i = checkTime(today.getMinutes()); 
 
     
 
     var val = days[d]+'<br>'+h+':'+i+"</span><br>"+f+' '+months[m]+' '+y; 
 
     
 
     document.getElementById('time').innerHTML = val; 
 
     
 
     t = setTimeout(function() { 
 
      startTime() 
 
     }, 500); 
 
    } 
 
    
 
    startTime(); 
 
})();

#time{ 
 
\t text-align: right; 
 
\t //display:table-cell; 
 
    
 
} 
 

 
#aszone{ 
 
\t margin-left: 20px; 
 
\t margin-right: 20px; 
 
\t height: 10%; 
 
\t display:table; 
 
\t background-size: cover; 
 
} 
 

 
.gauche{ 
 
\t width: 27%; 
 
\t text-align: left; 
 
\t display:table-cell; 
 
} 
 

 
.droite{ 
 
\t width: 73%; 
 
\t //display:table-cell; 
 
\t vertical-align:middle; 
 
    margin-left:20px; 
 
} 
 

 
.helper{ 
 
\t display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 

 
img{ 
 

 
\t vertical-align: middle; 
 
\t width: 150px; 
 
}

<div id="aszone"> 
 
      <div class="gauche"> 
 
       <span class="helper"></span> 
 
       <img src="http://www.tablesandfables.com/wp/wp-content/uploads/2016/06/youtube-logo.jpg"> 
 
      </div> 
 

 
      <div class="droite" id="time" > 
 
      </div> 
 
</div>

Quelle

2016-11-22 07:41:16

Wie zum Beispiel:

body { 
 
    margin: 0; 
 
}

Quelle

2016-11-22 07:42:05 tomasran

Textausrichtung: rechts; behalten Sie einen Rand, egal was ich versuche

Antwort

Verwandte Themen