Question

我试图用一个标签在一行中显示2个文本框。

我已经使用了css，但它没有用。

<div class="inq_form_label_prd">
Subject :
</div>
<div class="inq_form_content_prd">
    <input type="text" class="inq_txtbox_prd" name="inq_sub_msg">
</div>
<div class="inq_form_label_prd1">
    Subject :
</div>
<div class="inq_form_content_prd1">
    <input type="text" class="inq_txtbox_prd" name="inq_sub_msg">
</div>

CSS：

  .inq_form_label_prd
    {
        line-height: 28px;
        float: left;
        width: 120px;
        font-weight: bolder;
        text-align: right;
        padding-right: 10px;
        color: #666;
        margin-top:5px;
        margin-left:0px;
    }
    .inq_form_content_prd
    {
        margin-left: 130px;
        line-height: 28px;
        font-size:12px;
        font-weight:bolder;
    }
    .inq_form_label_prd1
    {
        line-height: 28px;
        float: left;
        width: 120px;
        font-weight: bolder;
        text-align: right;
        padding-right: 10px;
        color: #666;
        margin-top:5px;
        margin-left:200px;
    }
    .inq_form_content_prd1
    {
        margin-left: 390px;
        line-height: 28px;
        font-size:12px;
        font-weight:bolder;
    }

任何建议，为什么它不显示内联。我想要2个文本框和内联标签。新的一行中的下两个等等。

谢谢。

Answer 1

DEMO

你可以简单。

<div class="block">
    <div>Subject
        <input type="text">
    </div>
    <div>Subject
        <input type="text">
    </div>
</div>
<div class="block">
    <div>Subject
        <input type="text">
    </div>
    <div>Subject
        <input type="text">
    </div>
</div>

CSS

div {
    display: inline;
}
.block{
    width: 100%;
    display: block;
}

Answer 2

我建议你将每行的左边部分包含在带有“left-part”类的div中，将右边部分包含在带有“right-part”类的div中，并在css中为每个行包含float：left /权;

.left-part {
    float: left;
}
.right-part {
    float: right;
}

http://jsfiddle.net/DfPr5/

Answer 3

div标签需要更改为span
删除浮动和保证金属性;

在两个div标签中包含两个块

demo

<div>
<span class="inq_form_label_prd">Subject :
</span>
<span class="inq_form_content_prd">
    <input type="text" class="inq_txtbox_prd" style="margin-top: 5px;" id="inq_sub_msg" name="inq_sub_msg" />
</span>

<span class="inq_form_label_prd1">Subject :
</span>
<span class="inq_form_content_prd1">
    <input type="text" class="inq_txtbox_prd" style="margin-top: 5px;" id="inq_sub_msg" name="inq_sub_msg" />
</span>
</div>

Answer 4

<div>代码显示为block，为了更改此分类，请在CSS display: inline;中添加您希望成为同一行的每个代码。

注意：你也可以使用 inline-block ，试一试。

2文本框未显示在行中

4 个答案: