输入组-两个彼此接近的输入
输入组-两个彼此接近的输入
提问于 2013-09-23 15:46:11
如何使输入组包含两个输入？
<div class="input-group">
<input type="text" class="form-control" placeholder="MinVal">
<input type="text" class="form-control" placeholder="MaxVal">
</div>这不起作用，它们是水平的而不是内联的
回答 6
Stack Overflow用户
发布于 2015-07-09 18:55:04
使用以下命令创建一个input-group-glue类：
.input-group-glue {
width: 0;
display: table-cell;
}
.input-group-glue + .form-control {
border-left: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" value="test1" />
<span class="input-group-glue"></span>
<input type="text" class="form-control" value="test2" />
<span class="input-group-glue"></span>
<input type="text" class="form-control" value="test2" />
</div>
Stack Overflow用户
发布于 2014-08-18 07:33:52
我已经搜索了几分钟，但我找不到任何可用的代码。
但现在我终于做到了！看一看：
<div class="input-group" id="unified-inputs">
<input type="text" class="form-control" placeholder="MinVal" />
<input type="text" class="form-control" placeholder="MaxVal" />
</div>和css
#unified-inputs.input-group { width: 100%; }
#unified-inputs.input-group input { width: 50% !important; }
#unified-inputs.input-group input:last-of-type { border-left: 0; }Stack Overflow用户
发布于 2015-12-04 01:18:40
我对这个页面上的任何答案都不满意，所以我自己摆弄了一下。我想出了以下几点
angular.module('showcase', []).controller('Ctrl', function() {
var vm = this;
vm.focusParent = function(event) {
angular.element(event.target).parent().addClass('focus');
};
vm.blurParent = function(event) {
angular.element(event.target).parent().removeClass('focus');
};
});.input-merge .col-xs-2,
.input-merge .col-xs-4,
.input-merge .col-xs-6 {
padding-left: 0;
padding-right: 0;
}
.input-merge div:first-child .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-merge div:last-child .form-control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-merge div:not(:first-child) {
margin-left: -1px;
}
.input-merge div:not(:first-child):not(:last-child) .form-control {
border-radius: 0;
}
.focus {
z-index: 2;
}<html ng-app="showcase">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container">
<label class="control-label">Person</label>
<div class="input-merge" ng-controller="Ctrl as showCase">
<div class="col-xs-4">
<input class="form-control input-sm" name="initials" type="text" id="initials"
ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"
ng-model="person.initials" placeholder="Initials" />
</div>
<div class="col-xs-2">
<input class="form-control input-sm" name="prefixes" type="text" id="prefixes"
ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"
ng-model="persoon.prefixes" placeholder="Prefixes" />
</div>
<div class="col-xs-6">
<input class="form-control input-sm" name="surname" type="text" id="surname"
ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"
ng-model="persoon.surname" placeholder="Surname" />
</div>
</div>
</body>
</html>
这样，就可以根据自己的喜好设置各个输入的宽度。此外，上述代码片段的一个小问题是，当聚焦或无效时，输入看起来不完整。我用一些angular代码修复了这个问题，但你也可以用jQuery或原生javascript或其他任何东西轻松地做到这一点。
代码将类.focus添加到包含div的类中，因此当输入被聚焦时，它可以获得比其他类更高的z索引。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18954117
复制相关文章
相似问题