如何使用文本的宽度百分比 (%)？

Question

我有文本框和标签。我想并排显示并且想要 width: 100% 文本（所以我需要这个 :text width change when page size change）但我没有。

这是我的代码：

<div class="col-xs-6 col-md-6">
    <div class="form-group clearfix">
        <label for="UxSearch">Search:</label>
        <input type="text" name="UxSearch" id="UxSearch" class="form-control"/>
    </div>
</div>

这是我的 css class:

form-group {
    margin-bottom: 15px;
}

.form-control {
    display: block;
    width: 100%;
    height: 29px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.25;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

宽度：100% 有效，但文本和标签未对齐（如照片）

但这就是我想要的：

我试过显示：内联块但没有发生。

你能帮帮我吗？

Answer 1

col-xs-6 表示在移动设备中 div 将占用设备屏幕的一半宽度 (<768px)

.form-group {
display:inline-flex;
width:100%;

}
.form-control {
display: block;

height: 29px;
padding: 6px 12px;
font-size: 12px;
line-height: 1.25;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-6 col-md-6">
<div class="form-group clearfix">
    <label for="UxSearch">Search:</label>
    <input type="text" name="UxSearch" id="UxSearch" class="form-control"/>
</div>
</div>

如何使用文本的宽度百分比 (%)？

How to use width percentage (%) for text?

html

css

width

percentage