Сделать легенду заполнить всю ширину в пределах fieldset - PullRequest
Новая
       35

Сделать легенду заполнить всю ширину в пределах fieldset

5 голосов
/ 11 июня 2011

Я хотел бы иметь фон для поля legend в пределах fieldset.И я хочу, чтобы он занимал всю ширину, но только в пределах набора полей.Если я использую legend {width: 100%}, это будет шире , чем fieldset.

Вот пример, запускаемый в JSFiddle : 

<html>
<head>
<style>
fieldset {
    border:0;
    outline: 1px solid gray;
}

legend {
    font-weight:bold;
    background: orange;
    width: 100%
}
</style>
</head>
<body>
<fieldset>
    <legend>Legend</legend>
    Content of Fieldset
</fieldset>
</body>
</html>

Можно ли как-нибудь заставить legend заполнить только ширину внутри fieldset?

Ответы [ 2 ]

3 голосов
/ 11 июня 2011

См .: http://jsfiddle.net/TAvRF/1/

Вы можете использовать box-sizing: border-box: 

legend {
    font-weight:bold;
    background: orange;
    width: 100%;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Затем вы можете добавить padding:http://jsfiddle.net/TAvRF/5/

Хотя, мне кажется, что просто установка padding: 0 и забвение о box-sizing: border-box работают для меня .. http://jsfiddle.net/TAvRF/6/

1 голос
/ 11 июня 2011

Это звучит как простая проблема с заполнением, я думаю, что вы можете легко решить ее, используя сброс или настройку заполнения в legend: 

legend {
    font-weight:bold;
    background: orange;
    width: 100%;
    margin: 0;       /* added just in case... */
    padding: 0;
}
...