gpt4 book ai didi

html - 内联表单标签对齐

转载 作者:行者123 更新时间:2023-11-28 16:33:01 24 4
gpt4 key购买 nike

这是我的问题的简化版本:

.select-trigger,
.select-trigger:focus {
min-height: 34px;
line-height: 2.45;
border-color: #ccc;
}
.select-trigger {
border: 1px solid #aaaaaa;
border-radius: 4px;
background-color: #ffffff;
}
/* added rule */

.form-inline .select {
display: inline-block;
min-width: 180px;
}
<!DOCTYPE html>
<html>

<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<form class="form-inline">

<div class="form-group">
<label>Label 1</label>
<div class="select">
<div class="select-trigger">

</div>
</div>
</div>

<div class="form-group">
<label>Label 2</label>
<input type="text" class="form-control">
</div>

<div class="form-group">
<label>Label 3</label>
<div class="select">
<div class="select-trigger">
Foo
</div>
</div>
</div>

</form>
</body>

</html>

(可能Label 2不会出现在一行中,如果view port不够大,这里有一个JsBin可以全屏查看: http://jsbin.com/sobupicire/3/edit?output )

  • Label 1 是问题所在:Label 位于 div 的底部。它应该在 div.select
  • 的垂直中间
  • 标签 2 是所需的外观
  • Label 3 与 Label 1 相同,但有些文本看起来应该如此(标签位于 div.select
  • 的垂直中间

最佳答案

对所有标签和“表单控件”使用“标签控件”

http://jsbin.com/calaconidu/1/edit?output

关于html - 内联表单标签对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35016047/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com