How to position the legend inside a fieldset with

问题:

This question already has an answer here:

• Prevent the fieldset element's border from going through the legend element 2 answers

According to the several references on the web, it is not possible to position a legend. So it is suggested to wrap it with span:

<legend><span>Foo</span></legend>

Then we can position the span inside the fieldset. but then when I want to add a border on top of the fieldset, there is a gap for the legend. Luckily, I've found that adding border to the legend also fixes this little, tiny gap but that's ugly solution (as everything else with css). Do you have any more valid solutions to this problem?

note: I've found the solution concurrently, after I've started writing this question, so I want to still ask it.

回答1:

I think this will work

 <legend><span>ur text</span></legend>

Give border to the legend tag

legend {padding: 2px;border: 1px solid green;}

回答2:

I found that simple float:left for LEGEND will do the job.

Codepen sample: http://codepen.io/vkjgr/pen/oFdBa

回答3:

I know this is an old question, but I got this page when I googled "fieldset legend position", and I really couldn't find a good answer.

The legend just won't behave!, so the best solution I found was to position it absolute and have a padding top on the fieldset. JSFildle example: http://jsfiddle.net/carlosmartinezt/gtNnT/356/

fieldset {
    position:relative;
    padding-top:50px;
}

legend {
    position:absolute;
    top:20px;
    left:18px;
}​

回答4:

Use an outline instead of a border: http://jsfiddle.net/leaverou/gtNnT/

回答5:

The OP almost answered his own question: wrapping does the trick, but it's the other way around. Use:

<span><legend>Foo</legend></span>

回答6:

Set margins for positioning. It works without problems.

legend {margin-left:50px;} /* 50px from Left of the Fieldset */

回答7:

You can use margin-bottom "-50px" for legend and padding-top "50px" for fieldset so do not overlap.

fieldset { 
padding-top:50px;
}

fieldset legend { 
margin-bottom:-50px;
}

回答8:

This seems more straight forward to me.

fieldset legend { 
    position:relative;
    left:20px;
}

回答9:

Found this the most consistent, tested in IE7, Firefox and Chrome

fieldset legend { text-align:left; }

回答10:

I ended up using just div elements. In the end, I just need the border and the text over the border, that's it.