Ich bin neu in HTML und CSS, so ist es schwer, wie kann ich alle Semikolon wie Screenshot ausrichten?Ausrichten einer Reihe von Etiketten und Werten
PSD wie folgt aussehen:
Hier ist mein HTML-Markup ist
<ul>
<li>Name <span>: John Doe</span></li>
<li>Age <span>: 30.30.30</span></li>
</ul>
und das ist die CSS
li span {
padding-left: 20px;
}
Und das Ergebnis ist Screeshot:
Was wird die entsprechende Markup und CSS dafür?
Verwenden display:table-row für li und display:table-cell für label s.
li {
padding-left: 20px;
display: table-row;
}
li label {
display: table-cell;
}
li label:not(:first-child) {
padding-left: 40px;
}<ul>
<li><label>Name</label><label>: John Doe</label></li>
<li><label>Age</label><label>: 30.30.30</label></li>
</ul>Ok eine andere Lösung. Für Kicks
li {
display: flex;
flex-direction: row;
justify-content: space-between;
}
span {
width: 400px;
text-align: left;
}<ul>
<li><span>Name</span><span>: John Doe</span></li>
<li><span>Another Thing</span><span>: John Woe</span></li>
<li><span>Finally</span><span>: Another last thing</span></li>
</ul>wie wenn die zweite 'li' Familie wäre? – Ehsan
Es tut mir leid.Ich verstehe deine Frage nicht. So wie das? – archae0pteryx
Ok, siehe Ergebnis in Ihrem aktualisierten Beitrag. – Ehsan
<table>
<tr>
<td>Name </td><td>: </td><td> John Doe</td>
</tr>
<tr>
<td>Age </td><td>: </td><td> 30.30.30</td>
</tr>
</table>2 Möglichkeiten, die Sie erreichen können.
Verwendung table
<table>
<tr>
<td>Name</td>
<td>: John</td>
</tr>
</table>
Oder wenn Sie ul und li
<ul>
<li><span>Name </span><span>: John Doe</span></li>
<li><span>Age </span><span>: 30.30.30</span></li>
</ul>
li span:first-child {
width: 200px;
}
Hoffnung verwenden möchten, dies wird Ihnen helfen
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Name</td>
<td>John Doe</td>
<tr>
<td>Age</td>
<td>30.30.30</td>
</tr>
</table>
</body>
</html>können Sie Tabelle verwenden hier wie folgt aus:
<tbody class="table" >
<tr>
<td>Name</td>
<td>$100</td>
</tr>
<tr>
<td>Age</td>
<td>$80</td>
</tr>
<tr>
<td>Job</td>
<td>$80</td>
</tr>
</tbody>
</table>
und in CSS
.table td{
padding-left: 3em;
}
Hope this demo helfen Ihnen
Sie bitte Ihren Namen setzen können: usw. auch in einer Spanne, und geben Sie dieser Spanne eine Klasse mit einer festen Breite. Oder verwenden Sie stattdessen eine Tabelle. – Robert
Sie können Tabellenstruktur verwenden. –