如何將div和label保持在同一行？

Question

這就是我想要實現的：在輸入框旁邊顯示一條消息。

然而，當消息太長整個事情會發生在輸入框下方。

CSS

.data-form{ 
    display: block; 
    box-sizing: border-box; 
    line-height: 22.8px; 
} 
.data { 
    box-sizing: border-box; 
    display: inline-block; 
} 
.form-group { 
    margin-bottom: 15px; 
    // box-sizing: border-box; 
} 
.data-status { 
    display: inline-block; 
    color: red; 
    word-wrap:break-word; 
} 
.data-label { 
    display: inline-block; 
} 

.form-control { 
    width:200px; 
    font-size: 16px; 
} 

HTML標記

<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4"> 
    <form class='data-form'> 
     <div class='data form-group row'> 
      <label class='data-label'> 
       <span> Add a data code </span> 
       <input type='text' name='data' class='form-control'> 

       <div class='data-status'> 
        <span class='data-status'>TEST </span> 
       </div> 

      </label> 

     </div> 
    </form> 
</div> 

我要保持整個錯誤信息給input的右手邊，無論長短的錯誤文本

我已經試過

1. '破字'
2. 各種不同的結構such as moving the message inside a div which sits at the same level of label。

不幸的是，他們不工作。

這裏是一個展示的問題 http://jsfiddle.net/kongakong/o338t791/3/

任何建議的代碼？它採用引導CSS

Answer 1

只要改變.data-status規則這個刪除inline-block：

.data-status { 
    color: red; 
    word-wrap:break-word; 
} 

Here is a fiddle which shows it in action

的inline-block規則是什麼迫使元素留在一個單一的線。您也可以將其更改爲display:inline;，但這是span元素的默認規則。

Answer 2

在窗體控件中，添加一個顯示內聯。

.form-control { 
    width:200px; 
    font-size: 16px; 
    display:inline; 
} 

作爲數據狀態，

.data-status { 
    display: inline; 
    color: red; 
    word-wrap: break-word; 
} 

默認帶有形狀控制是顯示：塊。 這將使跨度和輸入內聯。在div中包裝「添加數據代碼」。

下面是完整的HTML和CSS，

<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4"> 
    <form class='data-form'> 
     <div class='data form-group row'> 
      <label class='data-label'> 
       <div> 
       <span> Add a data code </span> 
        </div> 
       <input type='text' name='data' class='form-control'> 

       <div class='data-status'> 
        <span class='data-status'>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</span> 
       </div> 
      </label> 

     </div> 
    </form> 
</div> 

CSS;

.data-form{ 
    display: block; 
    box-sizing: border-box; 
    line-height: 22.8px; 
} 
.data { 
    box-sizing: border-box; 
    display: inline-block; 
} 
.form-group { 
    margin-bottom: 15px; 
    box-sizing: border-box; 
} 
.data-status { 
    display: inline; 
    color: red; 
    word-wrap:break-word; 
} 
.data-label { 
    display: inline-block; 
} 

.form-control { 
    width:200px; 
    font-size: 16px; 
    display:inline; 
} 

Answer 3

做在HTML代碼中的一些變化

<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4"> 
    <form class="data-form"> 
    <div class="data form-group row"> 
    <label class="data-label"> 
    <div> Add a data code </div> 
    <div class="data-status"> 
    <input class="form-control" type="text" name="data"> 
    </div> 
    <span class="data-status">TEST TEST TEST TEST TEST </span> 
    </label> 
    </div> 
    </form> 
</div> 

，並在您stysheet把

.data-status 
{ 
vertical-align: middle; 
}