Pertanyaan Bagaimana cara membuat elemen blok menyesuaikan dengan ukuran apa yang ada di dalamnya?


Jika saya memiliki HTML ini:

<li class="name">hi</li>
<li class="name">hello</li>
<li class="name">wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!</li> 

Dan CSS ini:

li.name{
    border: 1px solid #A38870;
    background-color: #FA682D;
    list-style: none;
    margin: 15px;
    padding: 5px;
}

Latar belakang meluas sepanjang jalan di halaman seperti ini.

Bagaimana saya bisa membuat latar belakang menyesuaikan dengan ukuran teks seperti ini (tanpa secara eksplisit mengatur lebar untuk setiap elemen daftar)?


9
2018-04-27 11:05


asal


Jawaban:


 display: table;

tambahkan kode css ini di li.name kelas css.


11
2018-04-27 11:14



li.name{
  /* your suff */
  float: left;
  clear: both;
}

Ini jadi ketika Anda mengapung elemen blok mereka beradaptasi dengan konten ukuran, masalahnya adalah mereka mengambang kiri, sehingga mereka akan bersebelahan, untuk menghindari ini Anda bisa clear: left atau clear: both.


2
2018-04-27 11:15



Ada beberapa solusi, tidak ada yang benar-benar sempurna; yang mana yang Anda inginkan tergantung pada kasus penggunaan Anda.

  1. Menggunakan display: table. Ini akan berfungsi di browser yang cukup baru tetapi tidak dalam versi IE lama.

  2. Menggunakan float: left; clear: both seperti yang disarankan di atas. Ini akan bekerja selama tidak ada pelampung lain di sekitarnya, dan sebaliknya hancur berantakan.

  3. Gunakan CSS khusus peramban (misalnya, Gecko mendukung width: -moz-fit-content). Ini memiliki kelemahan yang jelas.

Untuk kasusmu dan hari ini, display: table mungkin yang terbaik, tetapi maju kita bisa berharap bahwa fit-content nilai untuk width mendapat standar.


1
2018-04-27 18:05



Biola yang diperbaiki dan berfungsi di sini: http://jsfiddle.net/ezmilhouse/3jRx7/1/

li.name{
    border: 1px solid #A38870;
    background-color: #FA682D;
    display:inline;
    list-style: none;
    line-height:36px;
    padding:4px;
}

li.name:after { 
    content:"\A";
    white-space:pre;
}

0
2018-04-27 11:10



coba gunakan clear:both; float: left properti.


0
2018-04-27 11:23



Saya pikir cara terbaik adalah menggunakan CSS khusus browser, menulis baris untuk setiap browser seperti Justin Geeslin dijelaskan di sini:

Apakah ada nilai lintas-browser css untuk "width: -moz-fit-content;"?

p{
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

0
2017-07-31 14:20



Memberikan display: inline-block

li.name{
    border: 1px solid #A38870;
    background-color: #FA682D;
    list-style: none;
    margin: 15px;
    padding: 5px;

    display: inline-block;

}

-2
2018-04-27 11:09