3 svar · 377 visningar · startad av DavidB
Tjena
Det är så att jag försöker att sätta bredden på en <label> i ett formulär men jag lyckas inte så bra.
Jag har följande kod:
Mitt formulär:
<fieldset>
<label for="name">Namn:</label>
<input type="text" id="name" /> <br />
<input type="button" text="registrera" />
</fieldset>
CSS för formuläret:
fieldset
{
border: 0px;
}
label
{
width: 200px;
}
Problemet är nu att min label inte blir 200px bred som jag vill ha den utan den blir så bred att den passar runt sitt innehåll. Jag vet att den 'hittar' min label för om jag lägger till border: 1px solid black; så skapar det en border runt texten.
Någon som vet hur jag skall lyckas för att sätta bredden på min label?
<fieldset>
<label for="name">Namn: <input type="text" id="name" /></label>
<input type="button" value="registrera" />
</fieldset>
fieldset {
border: 0px;
}
label {
display: block;
position: relative;
}
label input {
position: absolute;
left: 200px;
top: 0px;
}
Det löste tyvärr ingenting.
Kom dock på vad felet var efter mycket trixande. Det är min DOCTYPE det är något fel på. Eftersom jag använder mig utav Visual Web Developer Express så har jag fått in denna automatiskt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Nu vet jag dock inte hur min DOCTYPE skall seut för att det skall fungera så jag kör utan tills vidare men det hade vart fint om nån vet hur det skall seut?
Problemet är att label genererar en inline-box, och inline-boxar kan per definition inte ha en angiven bredd.
Du behöver ändra det beräknade värdet på 'display' till block, tex genom att ange display:block eller genom att ange float:left.
<fieldset>
<legend>test</legend>
<p><label for="a">A:</label> <input name="a" id="a"></p>
<p><label for="b">B:</label> <input name="b" id="b"></p>
</fieldset>
fieldset label { width:10em; float:left; }
fieldset p { clear:left; }
Att det ser annorlunda ut om du tar bort doctypen beror på att webbläsare "medvetet" beter sig felaktigt för att kunna hantera gammalt innehåll på webben.