This blog post is derived from my own personal practice, to align the text elements of html, if it is not aligned, it will become very ugly, as shown in the figure below, so how to set it so that the elements occupy the same space?
Article directory
1. The source of the problem
2. Problem solving ideas
What is the author's purpose? No matter how many A there are, they are always aligned and have the same size. Then the input box will also have the same size. Then we can solve it by changing the css style.
3. Problem solution
You only need to set the css style for the label where A is located.
background-color: red;
width: 120px;
display: inline-block;
4. Complete source code and effect of the problem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.cfg_row_left {
background-color: red;
width: 120px;
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li>
<label class="cfg_row_left">AA:</label>
<input type="text" class="cfg_row_right" />
<label class="cfg_row_left">AAAAAA:</label>
<input type="text" class="cfg_row_right" />
</li>
<li>
<label class="cfg_row_left">AAAA:</label>
<input type="text" class="cfg_row_right" />
<label class="cfg_row_left">AABBBBAA:</label>
<input type="text" class="cfg_row_right" />
</li>
</ul>
</body>
</html>