V mojich kontaktných informáciách mám niekoľko riadkov, ktoré vyzerajú takto.
Phone: 123 456
Web site: page.eu
Rád by som vytvoril vertikálne vyrovnanie nadbodkočiarkami. Jedným zo spôsobov, ako to urobiť, myslím, je použiť dve rôzne divs, plávať ich doľava a nastaviť obsah jedného, aby bol zarovnaný vpravo a druhý, aby bol vľavo zarovnaný. je tu nejaká cesta?
odpovede:
1 pre odpoveď č. 1Pevná šírka plávajúcich divov alebo tabuliek (ale nedá sa to chváliť, pretože to nie je najlepšia prax)
1 pre odpoveď č. 2
Vzhľadom na to, že sa zdá, že ide o zoznam kontaktných informácií, odporúčam najprv použiť prvok zoznamu a potom dve rozpätia, aby obsahovali a zarovnali text:
<ul id="contact">
<li><span class="contactMethod">Phone</span>:<span class="contactInfo">123 456</span></li>
<li><span class="contactMethod">Web site</span>:<span class="contactInfo">page.eu</span></li>
</ul>
S CSS:
span {
display: inline-block;
}
span.contactMethod {
width: 30%;
text-align: right;
}
span.contactInfo {
width: 65%;
text-indent: 0.5em;
}
1 pre odpoveď č. 3
V príklade nie sú žiadne bodkočiarky (;); jaPredpokladajme, že máte na mysli dvojbodky (:). Čo máte, je tabuľka údajov, takže tu je najvhodnejšia štruktúra HTML tabuľky a dáva požadované vykresľovanie, ak jednoducho zarovnáte prvý stĺpec vpravo. Najlepšie je však nastaviť aj výplne:
<style>
th { text-align: right; font-weight: normal; padding-right: 0.3em; }
</style>
<table>
<tr><th>Phone: <td>123 456
<tr><th>Web site:<td>page.eu
</table>