像单个输入一样组合两个输入标记

Question

我是HTML的新手，我有一些关于输入标签的问题。在这里，我有两个由span标记(-)分隔的输入。我想做的是把两个输入像一个输入一样包装起来，如下图所示。我是否需要使用css添加样式或更改代码的整个结构?

<div class="form-group">
<label for="form-realname" class="col">test*</label>
<div class="input-group col">
<input type="text" class="form-control" placeholder="" />
<span class="input-group-text" >-</span>
<input type="text" class="form-control" placeholder=""  />
</div>    

理想结构

Answer 1

这是一个简单的解决方案:

1. 将border设置为0，使其不可见。
2. 添加border 1px与颜色，你需要的父div。
3. 别忘了把这个父div改成display: inline-block;

* {
margin: 0;
padding: 0;
}
input.form-control {
border: 0;
padding: 2px;
}
.input-group {
border: 1px solid gray;
display: inline-block;
}

<div class="form-group">
<label for="form-realname" class="col">test*</label>
<div class="input-group col">
<input type="text" class="form-control" placeholder="" />
<span class="input-group-text" >-</span>
<input type="text" class="form-control" placeholder=""  />
</div>
</div>