Я пытаюсь выровнять текст легенды по левой стороне, но при этом верхняя граница исчезает. Если я добавлю width=auto
, я получу полную рамку, но текст выровняется по центру.
border: 1px solid #395d8b !important;
border-radius: 5px;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow : 0px 0px 0px 0px #000;
box-shadow : 0px 0px 0px 0px #000;
}
legend.border-set {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
padding: 0 10px;
border-bottom: none;
}
<fieldset class="border-set">
<legend class="border-set">Búsqueda</legend>
<form>
<div class="form-row justify-content-left">
<div align="left" class="form-group col-sm-4">
<small for="csf">Nombre</small>
<input type="name" class="form-control" id="csf" aria-describedby="csfhelp">
</div>
<div align="left" class="form-group col-sm-4">
<small for="csv">Descripción</small>
<input type="name" class="form-control" id="csv" aria-describedby="csvhelp">
</div>
<div class="form-check form-check-inline col-sm-offset-2">
<input class="form-check-input" type="checkbox" name="Online" id="Batch" value="Batch">
<label class="form-check-label" for="inlineRad">Normal</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="Online" id="Online" value="Online">
<label class="form-check-label" for="inlineRadio1">Especial</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="Online" id="Online" value="Online">
<label class="form-check-label" for="inlineRadio1">Doc. Design</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="Online" id="Online" value="Online">
<label class="form-check-label" for="inlineRadio1">Activo</label>
</div>
</div>
</form>
</fieldset>
с шириной: авто
без ширины: авто