Wie kann ich Folgendes in HTML und CSS erstellen?Text auf der linken Seite mit Zeile auf der rechten Seite in HTML und CSS
Etwas Text -------------------------------------------- -------------
die Linie sollte fest sein, keine gepunkteten
Dank
Sie können diese mit Flexbox wie folgt tun:
.text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.text::after {
content: "";
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-left: 8px; /*space before line*/
height: 2px; /*line thickness*/
background: #333; /*line color*/
}<div class="text">Some Text</div>Ich bin nicht hier, um Ihre Antwort zu beurteilen, aber ich denke, das ist keine gute Idee, einige CSS-Funktionen mit niedrigen Browser-Unterstützung wie "flex "und Pseudo, während das Problem mit einem anderen CSS-Techniken gelöst werden kann, die bessere Browser unterstützt. –
Vielen Dank für Ihren Kommentar. Ich stimme Ihnen vor allem zu, aber um fair zu sein, wie Sie sagten, gibt es nicht viele Informationen in der Frage. Der einzige Punkt, mit dem ich nicht einverstanden bin, ist die Unterstützung. Weder Flexbox noch Pseudo-Elemente können 2017 als "niedrig" bezeichnet werden (von caniuse.com: [flexbox] (http://caniuse.com/#search=flexbox), [Pseudo-Elemente] (http: // caniuse.com/#search=pseudo-elements))_. Ich benutze beide in der Produktion seit Anfang letzten Jahres und brauchte nur einen Fallback für IE11. Obwohl meine Antwort für fast alle Browser funktioniert, stimme ich Ihnen trotzdem zu. – bprocell
Sie erreichen, was Sie mit dem folgenden Code-Schnipsel wollen:
<style>
.inline-hr {
display: inline-block;
width: 50px;
vertical-align: middle;
}
</style>
Some text <hr class="inline-hr"/>
Dann können Sie die Linie so breit wie Sie möchten, indem Sie die Breite in Stil anpassen.
Was haben Sie schon versucht? Was ist dein Markup? Sollte die Linie den gesamten verbleibenden Platz einnehmen? Es gibt nicht annähernd genug Informationen, um diese Frage beantwortbar zu machen. – BenM
bitte folgen Sie der Anleitung von Stack-Überlauf "Wie schreibe ich eine gute Frage". https://StackOverflow.com/Help/how-to-ask –