Saya perlu memusatkan menyelaraskan menu horizontal.
Saya sudah mencoba berbagai solusi, termasuk campuran inline-block
/ block
/ center-align
dll., Tetapi belum berhasil.
Ini kode saya:
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
<li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
<li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
</ul>
<!-- Top menu content: END -->
</div>
MEMPERBARUI
Saya tahu bagaimana cara menyelaraskan pusat di ul
dalam div
. Itu bisa dicapai dengan menggunakan saran Sarfraz. Tetapi item daftar masih mengambang di dalam ul
.
Apakah saya perlu Javascript untuk menyelesaikan ini?
Jawaban:
Dari http://pmob.co.uk/pob/centred-float.htm :
Kode
sumber
position: relative
menu utama mengubah perilakuposition:absolute
sub menu.#buttons
id dalam pertanyaan OP? Di mana ada pemberitahuan, dalam jawaban Anda, bahwa dia harus menggunakannya? Bagaimana ini bisa diterima dan terpilih sebagai jawaban, jika Anda sebenarnya tidak menjawab pertanyaan, hanya mengutip beberapa topik bla-bla dari beberapa tautan?Ini bekerja untuk saya. Jika saya belum salah mengartikan pertanyaan Anda, Anda dapat mencobanya.
sumber
text-align: left;
Dengan flexbox CSS3. Sederhana.
sumber
Ini adalah cara paling sederhana yang saya temukan. Saya menggunakan html Anda. Padding hanya untuk mereset default browser.
sumber
Berikut ini adalah artikel yang bagus tentang cara melakukannya dengan cara yang sangat solid, tanpa peretasan dan dukungan lintas-browser penuh. Bekerja untuk saya:
-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
sumber
Coba ini:
sumber
Lakukan seperti ini :
Dan CSS:
sumber
Seperti banyak dari Anda, saya telah berjuang dengan ini untuk sementara waktu. Solusinya akhirnya harus dilakukan dengan div yang berisi UL. Semua saran tentang mengubah padding, lebar, dll. UL tidak berpengaruh, tetapi yang berikut tidak.
Ini semua tentang
margin:0 auto;
pada div yang mengandung. Saya harap ini membantu beberapa orang, dan terima kasih kepada semua orang yang sudah menyarankan ini dalam kombinasi dengan hal-hal lain.sumber
Demo - http://codepen.io/grantex/pen/InLmJ
Omg jauh lebih bersih.
sumber
Secara umum cara memusatkan elemen tingkat hitam (seperti a
<ul>
) menggunakanmargin:auto;
properti.Untuk menyelaraskan elemen level teks dan inline dalam elemen level blok, gunakan
text-align:center;
. Jadi semuanya bersama-sama seperti ...... harus bekerja.
Kasing tepi adalah Internet Explorer6 ... atau bahkan IE lain ketika tidak menggunakan a
<!DOCTYPE>
. IE6 salah menyelaraskan menggunakan tingkat blok elemntstext-align
. Jadi jika Anda ingin mendukung IE6 (atau tidak menggunakan<!DOCTYPE>
) solusi lengkap Anda adalah ...Sebagai catatan kaki, saya pikir
id="topmenu firstlevel"
tidak valid karenaid
atribut tidak dapat berisi spasi ...? Memang rekomendasi W3C mendefinisikan yangid
atribut sebagai tipe 'nama' ...sumber
Saya menggunakan tampilan: properti inline-block: solusinya adalah menggunakan pembungkus dengan lebar tetap. Di dalam, blok ul dengan blok inline untuk tampilan. Menggunakan ini, ul hanya mengambil lebar untuk konten yang sebenarnya! dan akhirnya margin: 0 otomatis, untuk memusatkan inline-block = ini)
sumber
saya menggunakan kode jquery untuk ini. (Solusi alternatif)
sumber
ul sebagai inline-table memperbaiki masalah. Saya menggunakan div induk untuk menyelaraskan teks ke pusat. cara ini terlihat bagus bahkan dalam bahasa lain (terjemahan, lebar berbeda)
sumber
Solusi @ Robusto adalah yang paling sederhana untuk apa yang saya coba lakukan, saya sarankan Anda menggunakannya. Saya mencoba melakukan hal yang sama untuk gambar dalam daftar tidak teratur untuk membuat galeri ... Saya membuat biola untuk bermain-main dengan itu. Jangan ragu untuk mencobanya di sini.
[disetel menggunakan kode sampel robusto]
HTML:
CSS:
sumber
Apakah perkiraan yang layak di layar lebar. Itu tidak baik, tetapi perbaikan kotor yang baik.
sumber
Itu saja!
sumber