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的右侧，而不管错误文本的长度

我试过了

＆＃39;中断字＆＃39;
各种不同的结构such as moving the message inside a div which sits at the same level of label。

不幸的是他们不起作用。

以下是演示此问题的代码 http://jsfiddle.net/kongakong/o338t791/3/

有什么建议吗？它使用bootstrap 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

在表单控件中，添加display-inline。

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

数据状态为，

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

默认自带的表格控件是display：block。这将使span和输入内联。包裹＆＃34;添加数据代码＆＃34;在一个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;
}

如何将div和标签保持在同一行？

3 个答案: