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

【问题标题】：How to use width percentage (%) for text?如何使用文本的宽度百分比 (%)？
【发布时间】：2017-05-19 06:40:04
【问题描述】：

我有文本框和标签。我想并排显示并想 width: 100% for text（所以我需要这个 :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类：

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;
}

width : 100% 有效，但文本和标签未对齐（如照片）

但这就是我想要的：

我尝试了 display: inline-block 但没有发生。

你能帮帮我吗？

【问题讨论】：

jsfiddle.net/3of3vd9g 。你在寻找这样的东西吗？

标签： html css width percentage

【解决方案1】：

col-xs-6 表示在移动 div 中将占用设备屏幕的一半宽度（

.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>

【讨论】：