css设置右侧span
0
最佳答案
0
<form action="#"> <div class="form-group"> <label>Name:</label> <input type="text"> </div> <div class="form-group"> <label>Address:</label> <input type="text"> </div> <div class="form-group"> <label>Date of Grant:</label> <input type="text"> </div> </form>
样式：
.form-group { display: table; } label, input { display: table-cell; } label { width: 1%; white-space: nowrap; } input { box-sizing: border-box; border: 0 none; border-bottom: 1px solid #444; width: 100%; }
大概就是这个样子
收获园豆：5
十分谢谢回复。我去试试去。
其他回答(4)
0
设置label 和 input 的display 为 inline-block, 然后label固定宽度，input自适应宽度 。
或者label 和 input 都左浮动，label 固定宽度，input 自适应宽度
左侧的文字是不固定长度的。有长有短，右侧的输入框希望是能紧跟着左侧文字后。然后右端由对齐
@品茗见南山: 那应该没什么好办法，只能用js了 。
0
试试flex吧~~~~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
form>div{
display: -webkit-flex;
display: flex;
}
label {
white-space: nowrap;
}
input {
outline: none;
border: none;
border-bottom: 1px solid #444;
width: 100%;
}
</style>
<body>
<form action="#">
<div>
<label>Name:</label>
<input type="text">
</div>
<div>
<label>Address:</label>
<input type="text">
</div>
<div>
<label>Date of Grant:</label>
<input type="text">
</div>
</form>
</body>
</html>
收获园豆：5
谢谢帮忙。
0
直接写不行吗？右边就是div套input,div只有下边框，宽度固定，input不要边框，这样不行？？
0
设置label,input为display:inline-block;label为左浮动，input自适应
