0
我無法正確對齊輸入字段。我希望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;
}
解釋不清楚，你想要控制和標籤在一邊？ – Manjuboyz
@Manjuboyz我需要將標籤和文本框一一對齊。正如你可以在jsfiddle中看到的，它沒有正確對齊。 – beginner