我无法正确对齐输入字段。我希望 Enter 标题详细信息和状态字段正确对齐。我已经尝试了一些东西，但没有用。
label {
display: inline-block;
width:100px;
text-align: right;
}
input {
display: inline-block;
width:100px;
float: left;
}
add
{
font-size: 150%;
}
heading
{
font-size: 180%;
text-align: center;
}
header, footer {
padding: 1em;
color: white;
background-color: cornflowerblue;
clear: left;
text-align: center;
}
/*div.container {
width: 100%;
border: 1px solid gray;
}*/
h2{
text-align: center;
color:black;
font-size: 270%;
font-family:'Segoe UI';
}
body{
position: relative;
background: url(images/gradient.png);
background-repeat:no-repeat;
background-size:150% 150vh;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #286090;;
color: white;
}
.temp123
{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
text-align:center;
}
.ui-datepicker-calendar {
display: none;
}
body1{
position: relative;
background: url(images/gradient2.jpeg);
background-repeat:no-repeat;
background-size:100% 100vh;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link href="font.css" rel="stylesheet" />
<script src="header.js"></script>
</head>
<body ng-app="myApp" ng-controller="headerCtrl">
<div class="container" style="background-color:silver;">
<h2><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div>
<label>Enter the Header:</label>
<input type="text" name="Header" ng-model="header"><br>
</div>
<p>
</p>
<div>
<label>Status:</label>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
<table class="table table-bordered" align="left">
<tr>
<th style="text-align:center;font-size:120%">Header</th>
<th style="text-align:center;font-size:120%">Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
<td>
<!--<button class="editbtn">edit</button>-->
<button ng-click="editableInput = !editableInput">
<span ng-show="editableInput">UPDATE</span>
<span ng-show="!editableInput">EDIT</span>
</button>
<button class="editbtn">DELETE</button>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>我已将此添加到我的代码中:
label {
display: inline-block;
width:100px;
text-align: right;
}
input {
display: inline-block;
width:100px;
float: left;
}
最佳答案
这是解决您问题的简单方法 只需添加
//CSS
label{
min-width:120px
}
.input-row{
padding-bottom:10px;
}
//HTML
<div class="panel-body">
<div class="input-row">
<label>Enter the Header:</label>
<input type="text" name="Header" ng-model="header"><br>
</div>
<div class="input-row">
<label>Status:</label>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
检查这个https://jsfiddle.net/1wbkt3hx/4/
希望你的问题有这个解决方案。
关于html - 输入字段的对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41671154/