Bagaimana mengatur properti ketinggian untuk SPAN

88

Saya perlu membuat kode berikut merenggang dengan ketinggian yang telah ditentukan

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

Tetapi karena span adalah elemen inline, properti "height" tidak akan berfungsi.

Saya mencoba menggunakan div sebagai gantinya, tetapi itu akan meluas hingga lebar elemen atas. Dan lebarnya harus fleksibel.

Adakah yang bisa menyarankan solusi yang baik untuk ini?

Terima kasih sebelumnya.

css height html Kelvin
sumber
1
Anda harus menggunakan tag heading (h1, h2, h3, ...) untuk judul. Ini lebih benar secara semantik.
Pickel
1
Ya, Anda Pickel yang benar. Terima kasih semuanya atas bantuan Anda. Ini adalah css terakhirku. Ini sangat cocok untuk saya: <style> h4 {display: inline-block; zoom: 1; * tampilan: sebaris; margin: 0px; tinggi: 25px; } </style>
Kelvin

Jawaban:

142

Berikan display:inline-blockdi CSS - yang akan membiarkannya melakukan apa yang Anda inginkan.
Dalam hal kompatibilitas: IE6 / 7 akan bekerja dengan ini, seperti yang disarankan oleh mode quirks:

IE 6/7 menerima nilai hanya pada elemen dengan tampilan natural: inline.

casraf.dll
sumber
Untuk apa nilainya, IE7 tidak mendukung inline-block.
Scott Cranfill
Np. @ Scott: Saya tidak melihatnya di W3 - inilah yang mereka katakan:Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".
casraf
2
@henasraf - @ Scott benar, saya tidak dapat menggunakannya karena quicks juga: quirksmode.org/css/display.html
Nick Craver
2
Kutipan:IE 6/7 accepts the value only on elements with a natural display: inline.
casraf
1
Ahah, kurasa itu akan berhasil jika diterapkan pada spansaat itu. Terima kasih atas infonya, henasraf.
Scott Cranfill
13

ini untuk membuat display: blok-sebaris berfungsi di semua browser:

Cukup unik, di IE (6/7), jika Anda memicu hasLayout dengan "zoom: 1" dan kemudian menyetel tampilan ke sebaris, ini akan berperilaku sebagai blok sebaris.

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}
Aku ketakutan
sumber
5

Dengan asumsi Anda tidak ingin menjadikannya elemen blok, maka Anda dapat mencoba:

.title  {
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
    line-height: 2em; /* or */
    padding-top: 1em;
    padding-bottom: 1em;
}

Tetapi solusi termudah adalah dengan hanya memperlakukan .titlesebagai elemen tingkat blok, dan menggunakan tag judul yang sesuai <h1>melalui <h6>.

David mengatakan kembalikan Monica
sumber
0

menjangkau { display: table-cell; height: (your-height + px); vertical-align: middle; }

Agar span berfungsi seperti sel tabel (atau elemen lainnya, dalam hal ini), tinggi harus ditentukan. Saya telah memberikan ketinggian bentang, dan mereka bekerja dengan baik - tetapi Anda harus menambahkan tinggi agar mereka melakukan apa yang Anda inginkan.

mike s
sumber
0

Pilihan lain tentu saja adalah menggunakan Javascript (Jquery di sini):

$('.box1,.box2').each(function(){
    $(this).height($(this).parent().height());
})
Ukuser32
sumber
-4

Mengapa Anda membutuhkan span dalam kasus ini? Jika Anda ingin menata ketinggian, bisakah Anda menggunakan div? Anda dapat mencoba div dengan display: inline, meskipun itu mungkin memiliki masalah yang sama karena Anda pada dasarnya akan melakukan hal yang sama sebagai span.

Seth Petry-Johnson
sumber
3
Atau, abaikan semua ocehan saya dan gunakan jawaban henasraf :)
Seth Petry-Johnson
Komentar tidak setuju hanya membuat mereka yang ingin berkontribusi secara sah. Hentikan! Cukup tawarkan umpan balik yang membangun, atau mungkin lebih langsung, pendapat Anda sendiri tentang masalah tersebut.