首页新闻找找看学习计划

css设置右侧span

0
悬赏园豆:10 [已解决问题] 解决于 2017-05-09 16:42

请问大家有碰到类似图片这样的需求么?怎么实现啊。

品茗见南山的主页 品茗见南山 | 初学一级 | 园豆:193
提问于:2017-05-04 14:25
< >
分享
最佳答案
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
by.Genesis | 小虾三级 |园豆:1519 | 2017-05-04 15:45

十分谢谢回复。我去试试去。

品茗见南山 | 园豆:193 (初学一级) | 2017-05-04 16:08
其他回答(4)
0

设置label 和 input 的display 为 inline-block, 然后label固定宽度,input自适应宽度 。

或者label 和 input 都左浮动,label 固定宽度,input 自适应宽度

小精灵儿Pawn | 园豆:470 (菜鸟二级) | 2017-05-04 14:34

左侧的文字是不固定长度的。有长有短,右侧的输入框希望是能紧跟着左侧文字后。然后右端由对齐

支持(0) 反对(0) 品茗见南山 | 园豆:193 (初学一级) | 2017-05-04 14:44

@品茗见南山: 那应该没什么好办法,只能用js了 。

支持(0) 反对(0) 小精灵儿Pawn | 园豆:470 (菜鸟二级) | 2017-05-04 15:00
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
starWind | 园豆:223 (菜鸟二级) | 2017-05-05 13:31

谢谢帮忙。

支持(0) 反对(0) 品茗见南山 | 园豆:193 (初学一级) | 2017-05-09 16:43
0

直接写不行吗?右边就是div套input,div只有下边框,宽度固定,input不要边框,这样不行??

aiiright | 园豆:204 (菜鸟二级) | 2017-05-05 18:03
0

设置label,input为display:inline-block;label为左浮动,input自适应

小鹿姐姐 | 园豆:252 (菜鸟二级) | 2017-05-07 20:18
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册