CSS melaksanakan butang mendatar tanpa teknik lain
P粉893457026
P粉893457026 2023-09-04 12:29:02
0
1
497

Saya cuba mencipta dua butang mendatar yang mempunyai lebar yang sama - berdasarkan lebar butang terpanjang.

  • Kandungan teks setiap butang boleh dilaraskan oleh pengguna pada halaman yang berasingan...jadi saya tidak mempunyai kawalan ke atas panjang teks mereka/panjang teks butang pertama dan butang kedua.
  • Saya mahu butang melaraskan kepada panjang teks terpanjang, tetapi tidak melebihi lebar halaman (seperti pada peranti mudah alih).
  • Saya mahu butang muncul secara mendatar secara lalai, tetapi jika ia tidak muncul secara mendatar, disusun sebagai lajur.
  • Saya memerlukan teks butang untuk dibalut jika keseluruhan teks tidak muat.
Ya
Tidak, maaf - saya tidak boleh berbuat demikian

Saya mencuba pelbagai pilihan...tetapi tidak berjaya!

  • Apabila menggunakan grid-template-colums reka letak grid: 1fr 1fr, saya tidak dapat mencari cara untuk menyusun butang ke dalam lajur apabila diperlukan.
  • Saya tidak dapat mencari cara untuk menjadikan lebar butang sesuai dengan panjang teks apabila menggunakan flex dan flex:1 1 0.

Tolong bantu!

Terima kasih banyak-banyak! Damian.

P粉893457026
P粉893457026

membalas semua (1)
P粉604848588

Jom cuba pilihan ini. Apakah yang anda tidak suka tentang pendekatan ini?

div { background-color: rgba(0, 0, 0, 0.1); } .button-container { padding: 16px; display: flex; gap: 16px; } .horizontal-button { padding: 16px; flex: 1; text-align: center; word-wrap: hypens; } @media (max-width: 360px) { .button-container { flex-direction: column; } }
Yes
No, sorry - I cannot make it

J:Dalam kes ini bekas/butang mengambil keseluruhan lebar halaman... mereka tidak menyesuaikan dengan lebar teks.

S:Baiklah, kemudian:

div { background-color: rgba(0, 0, 0, 0.1); } .button-container { margin: auto; padding: 16px; box-sizing: border-box; display: flex; align-items: stretch; gap: 16px; max-width: max-content; } .horizontal-button { display: flex; flex-direction: column; justify-content: center; padding: 16px; flex: 1; text-align: center; max-width: 50%; } @media (max-width: 360px) { .button-container { flex-direction: column; } .horizontal-button { hyphens: auto; max-width: unset; } }
Yes
No, sorry - I cannot make it
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!