Question

我正在尝试并排输入表单的文本框，但我无法这样做。请帮忙。

小提琴：here

HTML：

<p>Your Name
<br>
<span class="wpcf7-form-control-wrap your-name">
    <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
</span> 
</p>
<p>Your Email
<br>
<span class="wpcf7-form-control-wrap your-email">
    <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7- validates-as-email" aria-required="true">
</span>
</p>

CSS：

.wpcf7 input[type="text"], .wpcf7 input[type="email"] {
    background-color: #fff;
    color: #000;
    width: 50%;
}

Answer 1

http://jsfiddle.net/rHh3w/12/show

只需将p元素设置为“display:inline;”，默认情况下它们是块元素，并且不会彼此对齐。

还删除了两个br代码

p {display:inline;}

Answer 2

从HTML标记中删除<br />。

写：

p{
    display:inline-block;
    width:50%;
}
.wpcf7-form-control-wrap input[type="text"],.wpcf7-form-control-wrap input[type="email"] {
    background-color: #fff;
    color: #000;
    width: 50%;
}

注意：

inline-block在元素之间留下空白区域。在同一行写入元素以避免它。

喜欢写

</p><p>

（在同一行）

而不是

</p>
<p>

（在不同的行上）

Fiddle.

Answer 3

Try this

我所做的是添加以下内容：

    p {
      float: left;
    }

这就是你需要做的，这也意味着如果你的容器宽度低于两个输入盒的固定宽度，它们将向下浮动两行，而不是破坏并从容器中溢出。

当你正在使用它时，可能值得将文本标签更改为actual labels，这将允许用户点击标签并仍然突出显示表格，由于价格的上涨，表格越来越重要在移动使用中。

此外，您错过了第一个输入框的结束>。

Answer 4

如何像桌子一样展示它们。

.myForm {
    width:100%;
    display:table;
}
.myForm div {
    margin:0;
    padding:0;
    display:table-cell;
}
.myForm div:last-of-type{
    text-align:right;
}

.myForm div:last-of-type将文字对齐到右侧。

在http://jsfiddle.net/463QF/

上查看

Answer 5

在p {/ p>下面尝试CSS以下

    p
    {
        width:auto;
        float:left;
        margin-right:10px;
    }

如果文本框之间需要一些空格，那么你可以将margin-right设置为相同。

Answer 6

只需将其添加到您的CSS代码中：p{width:40%;border:1px solid #000;float:left}

小提琴： http://jsfiddle.net/logintomyk/PSQ7u/

Answer 7

HTML示例：

<div class="myForm">
    <div>
        <label for="name">Your name</label>
        <input name="name" id="name" type="text" />
    </div>
    <div>
        <label for="email">your email</label>
        <input name="email" id="email" type="text" />
    </div>
</div>

CSS：

.myForm div {
    width: 47%;
    margin:0;
    padding:0;
    float:left;
} 

.myForm div label
{
    display:block;
}

fiddle

并排排列表格上的输入框

7 个答案: