The label ("Acid-stable amino acids") and checkbox are on different lines in my ASP.NET Core MVC application. (Sample ID is irrelevant here.) I would like them to be on the same line. Current misaligned output:
The field from the model:
[Display(Name = "Acid-stable amino acids")]
public bool AcidStables { get; set; }
The Razor view (removing most other irrelevant elements):
<div class="row">
<div class="col-md-6">
<form asp-action="Create">
<div class="form-group">
<label asp-for="ClientSampleID" class="control-label"></label>
<input asp-for="ClientSampleID" class="form-control" />
<span asp-validation-for="ClientSampleID" class="text-danger"></span>
</div>
<div class="checkbox">
<label asp-for="AcidStables" class="control-label"></label>
<input asp-for="AcidStables" class="form-control"/>
<span asp-validation-for="AcidStables" class="text-danger"></span>
</div>
</div>
</div>
I've tried a few things recommended in similar questions. Using inline-block display right before the label:
<div class="checkbox">
<style type="text/css">
label {
display: inline-block;
}
</style>
Or modifying the label or checkbox types in the site.css file:
.label {
display: inline;
font-size: 1.2em;
font-weight: 600;
padding: 5px;
}
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
or
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
I've tried changing to "form-horizontal".
Nothing changes the alignment of checkbox and label. Any input would be appreciated. Floating the checkbox may be a solution but I'm not sure how to do that. Relevant SO questions: here , here , here .
you can apply css
like
.checkbox .control-label{
float:left;
width:40%;
}
.checkbox input[type="checkbox"]{
float:left;
width:60%;
}
.checkbox:after{
content:'';
display:block;
clear:both;
}
From Bootstrap v4.0 and higher you can use:
<div class="form-group form-check">
<label asp-for="AcidStables" class="form-check-label"></label>
<input asp-for="AcidStables" class="form-check-input"/>
<span asp-validation-for="AcidStables" class="text-danger"></span>
</div>
This is a cleaner solution if you're already using Bootstrap, because you don't need to write additional CSS.
Note: The 'form-group' class is optional, but it gives nicer spacing if used in a form.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.