Bir xhtml 1.0 strict metin iki gibi benzeri bir hat oluşturmak için var mı merak ediyorum:

Section one
----------------------- Next section -----------------------
Section two

Böyle süslü şeyler yapmayı düşündüm:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

Veya alternatif olarak, yukarıdaki uyum sorunları var çünkü (her iki dikey ve yatay):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

Bu da ben bu karmaşayı çözmek olan uyum sorunları var

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>

Hizalama problemlerine ek olarak, her iki seçenek de'', ve eğer bu ve zarif bir çözüm olduğunu anlamadan. gördük yaparsanız çok memnun olurum fudgy hissediyorum

Okuduğunuz için teşekkürler.

Brian

Hakkında:

<div style="height: 2px; background-color: black; text-align: center">
  <span style="background-color: white; position: relative; top: -0.5em;">
    Section Title
  </span>
</div>

position: relative; top: -0.5em; Bu yöntem anahtarıdır. Sen dikey olarak metin merkezi sağlar. Ne yazık ki bu yöntem, metni de bir çizgi var gibi görünüyor sonunda yok ki sitenizin arka plan rengini bilmek gerekir.

Hattı oluşturmak için bir arka plan rengi kullanmaya alternatif olarak, border-top kullanabilirsiniz. O noktalı çizgiler gibi sınır etkileri getirmek.