display özelliğini kullanarak HTML öğeleri stil perspektifinden değiştirilebilir. Ancak, bu durum fieldset ve legend için geçerli değildir.Herhangi bir HTML öğesi bir fieldet/lejant olarak tasarlanabilir mi?
o fieldset ve legend gibi görünmek için diğer HTML elemanlarını stil mümkün mü? Örneğin Emin
Bunu denemek neden görmek istiyorsanız önceki cevabı hatalıdır:
<body style="background-color: #f00">
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
</body>
AFAIK bu sınır bozulma etkisi için hiçbir yol olduğunu legend öğesi, fieldset sınırında neden olur. Sadece CSS ile bunun mümkün olduğuna inanmıyorum, sadece fieldset etiketinin işlenmesinin bir parçası olan bir şey.
Açıklama: Ben taşıyıcı blok elemanın gözle görülür bir sınır straddles şekilde bir blok veya satır içi elemanı konumlandırmak için herhangi bir şekilde biliyor ve ardından konteyner elemanın sınır onun kutusunun arkasında kırık neden olur yoktur. <legend> öğesinin, <fieldset> öğesinin içerdiği sınırda yaptığı şey budur.
, a sınır ve sadece fieldset ve efsane gibi görünecektir DIV sınırını çakışmasına konumlandırılmış arka plan rengini set ile bir çocuğun başlığı elemanı ile bir DIV öğesi.
çok temel bir örnek:
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
Bu, yalnızca arka plan düz bir görüntü değil, bir görüntü ise, doğru görünebilir. –
Doğru. Arka plan resmini çocuk başlık öğesine de uygulamak mümkün değilse ve arka planla eşleştirilemiyorsa. Bu, elemanların çalışacak sabit bir konumda olmasını gerektirir. –
Bu oldukça iyi çalışıyor, ancak arka plan resim, koşullu açıklama hallediverir şey ise IE6 biraz garip hareket edecektir. efsane etiketi gibi (Gerçekten efsane etiketi gibi bakmak) biraz görünüyor ki IE6-8, FF3.6, Safari 5, Chrome 5
.fieldset {
position: relative;
border: 1px solid #000;
margin: 20px;
padding: 20px;
text-align: left;
}
.fieldset .legend {
background: #fff;
height: 1px;
position: absolute;
top: -1px;
padding: 0 20px;
color: #000;
overflow: visible;
}
.fieldset .legend span {
top: -0.5em;
position: relative;
vertical-align: middle;
display: inline-block;
overflow: visible;
}
<div class="fieldset">
<div class="legend">
<span>This is the title</span>
</div>
Test
</div>
test edilmiştir Yani kod sabit.
<div style="border: 2px groove #ccc">
<h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
Cevabım yanlış değil, sadece belirli koşulların çalışmasını gerektirir. Bu genellikle bu tür "hile" ile durumda olduğunu göreceksiniz; neredeyse hiç bir boyut tüm çözümlere uymaz. –
Onun sorusu "bir öğeyi bir fieldset/gösterge çifti olarak nasıl stilleyebilirim?" Sağladığım belgeye baktığınızda, iki özdeş blok görüyor musunuz? Gerçekten bilmek istediğim şey –
orada 'fieldset' /' legend' oluşturur tam etkiyi elde etmek için (CSS standardını kullanarak) bir yol ya da bir etki olup olmadığının sadece 'fieldset' /' gösterge için kodlanmış olup olmadığıdır '. Gerçekten de kodlanmış gibi göründüğü için, bu cevabı kabul ediyorum. – Jakob