.row {
display: block;
width: 500px;
}
.row label {
display: block;
width: 40%;
float: left;
}
.row input {
display: block;
width: 60%;
float: left;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Label + Input</title>
<style>
.row {
width: 600px;
margin: 2px auto;
}
.row:after {
content: "";
display: block;
clear: both;
}
.row .label {
background: #f88;
float: left;
}
.row .input {
background: #8f8;
}
</style>
</head>
<body>
<div class="row">
<div class="label" style="width:100px">label 1</div>
<div class="input">input 1</div>
</div>
<div class="row">
<div class="label" style="width:150px">label 2</div>
<div class="input">input 2</div>
</div>
<div class="row">
<div class="label" style="width:200px">label 3</div>
<div class="input">input 3</div>
</div>
<div class="row">
<div class="label">label 4</div>
<div class="input">input 4</div>
</div>
</body>
</html>
<div class="box">
<label for="" style="width: 100px;">Label</label>
<input type="text" value="input">
</div>
<div class="box">
<label for="" style="width: 60px;">Label</label>
<input type="text" value="input">
</div>.box {
width: 500px;
margin-bottom: 10px;
display: table;
}
label,
input{
display: table-cell;
}
input {
width: 100%;
margin-left: 10px;
}
label {
background-color: #ccc;
}
Простой
Простой
Простой
