如何使此表单正确内联？

我想从bootstrap中使用sr-only类来创建一个内联表单。如何使此表单正确内联？

应该是这样的：

Title    Cost 
________________ __________ ______ days at $ ______ X (remove button)

我已经搜查很多地方也没有找到一个解决方案。

<form> 
    <div class="form-group col-sm-5"> 
     <label for="name" class="control-label">Title</label> 
     <input type="email" value='' class="form-control" id="name" placeholder="Title" /> 
    </div> 
    <div class="form-group col-sm-2"> 
     <input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> days 
    </div> 
    <div class="form-group col-sm-2"> 
     <input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> /day 
    </div> 
</form>

Example

来源

2015-11-30 brunodd

http://jsfiddle.net/josangel555/mk3zcffy/增加了一些标签，让他们阻止..检查它可以帮助.. –

类.sr-only具有的位置是：绝对的风格。但是你可以定义你自己的课程。使用margin-top或height。看到这个例子中，我为你做，这样你就可以有一个想法（见全页选项的代码片段）：

.form-group > .sr-only.control-label { 
 
    display: block; 
 
    position: relative; 
 
    height: 27px; 
 
}

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 

 
<form> 
 
    <div class="form-group col-sm-5"> 
 
    <label for="name" class="control-label">Title</label> 
 
    <input type="email" value='' class="form-control" id="name" placeholder="Title" /> 
 
    </div> 
 
    <div class="form-group col-sm-2"> 
 
    <label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label> 
 
    <div class="input-group"> 
 
     <input type="email" value='' class="form-control" id="name" placeholder="Ime" > 
 
     <div class="input-group-addon">days</div> 
 
    </div> 
 
    </div> 
 
    <div class="form-group col-sm-2"> 
 
    <label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label> 
 

 
    <div class="input-group"> 
 
     <input type="email" value='' class="form-control" id="name" placeholder="Ime" > 
 
     <div class="input-group-addon">days</div> 
 
    </div> 
 
    </div> 
 

 
</form>

来源

2015-11-30 18:10:18

谢谢图略。我忘记了.input-group-addon类。 – brunodd

使用以下CSS。为了区别于常规形式，我添加了class，并假设它们浮动列，从组中删除col类。

.inline-form .form-group { 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
} 
 

 
.inline-form label { 
 
    display: block; 
 
} 
 

 
.inline-form input { 
 
    border: none; 
 
    border-bottom: solid 1px; 
 
}

<form class="inline-form"> 
 
    <div class="form-group"> 
 
     <label for="name" class="control-label">Title</label> 
 
     <input type="email" value='' class="form-control" id="name" placeholder="Title" /> 
 
    </div> 
 
    <div class="form-group"> 
 
     <input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> days 
 
    </div> 
 
    <div class="form-group"> 
 
     <input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> /day 
 
    </div> 
 
</form>

来源

2015-11-30 19:10:27

如何使此表单正确内联？

回答

相关问题