在同一行中放置两个输入文本框

Question

在同一行中放置两个输入文本框

7

我正在使用HTML和jQuery Mobile。以下是代码：

<div data-role = "content">
        <form action = "?" method="post" name="form" id = "form">
            <fieldset>
            <div data-role = "fieldcontain" class = "ui-hide-label">
                <label for="name">Name</label>
                <input type="text" name="name" id="name" value="" placeholder="Name" />
            </div>

            <div data-role ="fieldcontain" class= "ui-hide-label">
                <label for="surname">Surname</label>
                <input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
            </div>

            <div data-role ="fieldcontain" class= "ui-hide-label">
                <label for="address">Address</label>
                <input type="text" name="address" id="address" value="" placeholder="Address"/>
            </div>


                <div data-role="fieldcontain" class="ui-hide-label">
                    <label for="birth-place">Birth Place</label>
                    <input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" />
                </div>
                <div data-role = "fieldcontain" class="ui-hide-label">
                    <label for="province">Province</label>
                    <input type="text" name="province" id="province" value="" placeholder="PR" />
                </div>


                <div data-role="fieldcontain" class="ui-hide-label">
                    <label for"date">Birth Date</label>
                    <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" />
                </div>

                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" />
                        <label for="radio-choice-1">Male</label>
                        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="female"  />
                        <label for="radio-choice-2">Female</label>
                    </fieldset>
                </div>

                <div data-role="fieldcontain" data-type="horizontal">
                    <label for="select-choice-0"></label>
                    <select name="select" id="select">
                        <option value="politrauma">Politrauma</option>
                        <option value="cardiologico">Cardiologico</option>
                        <option value="neurologico">Neurologico</option>
                    </select>
                </div>
            </fieldset>
        </form>
    </div>

我无法将两个输入文本放在同一行。我尝试使用“block grid”，但它无效。

- Mazzy

1

你是指并排吗？你已经尝试过什么了吗？当你尝试时出了什么问题？ - Mr Lister

你的CSS是什么？你可以使用简单的float将它们放在同一行。 - Shadow The Spring Wizard

6个回答

5

我知道这个问题有点老，但是我刚遇到了同样的问题，以下方法解决了我的问题：

<fieldset class="ui-grid-a">
<div class="ui-block-a">
        <input type="text" id="" name="" value="">
</div>
<div class="ui-block-b">
        <input type="text" id="" name="" value="">
</div>

您甚至可以添加一些样式来改变字段的相对大小。

- Adan

3

只需将float属性添加到div标签中即可：

<form action = "./includes/user_form.php" method="post" id = "form">
        <div data-role = "fieldcontain" class = "ui-hide-label" style="float:left">
            <label for="name">Name</label>
            <input type="text" name="name" id="name" value="" placeholder="Name" />
        </div>
        <div data-role ="fieldcontain" class= "ui-hide-label" style="float:left">
            <label for="surname">Surname</label>
            <input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
        </div>
    </form>

- HellaMad

@ShadowWizard，您在jsfiddle上展示的内容是错误的，您没有加载jquery UI模块！ - Luc Stepniewski

@Luc 没有注意到。但仍然可以工作，jQuery、jQuery UI 和 jQuery Mobile 都已加载。你能否更新 fiddle 以使其不工作？ - Shadow The Spring Wizard

3

我在输入框外用 <span> 标签进行包装，并设置了一个覆盖了嵌套的 <div>（由jquery mobile生成）的display属性的类。此外，您还必须明确设置输入框的宽度。

示例：http://jsfiddle.net/FabyD/

CSS：

.inlineinput div {
    display: inline;
}

HTML:

<div>
    some text
    <span class="inlineinput">
        <input type='text' style='display: inline; width: 50px;' />
    </span>
    some text
    <span class="inlineinput">
        <input type='text' style='display: inline; width: 50px;' />
    </span>
    some text
</div>

- CrazyMORF

1

DIV是块级元素 - 默认情况下它们占据100%的宽度。这使得以下元素出现在“下一行”。

因此，您需要将第二组元素移动到与第一组相同的

中（或重新设计具有固定宽度并使用浮动的

，但这更具挑战性）。

- Diodeus - James MacFarlane

0

另一个提示是检查数据类型为“horizontal”的类型（无意冒犯）。

<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
                    <div data-role="fieldcontain">
                      <label for="textinput11">
                        Something:
                      </label>
                      <input name="something" id="textinput11" placeholder="" value="" type="text">
                    </div>

                    <div data-role="fieldcontain">
                      <label for="textinput12">
                        Something else:
                      </label>
                      <input name="something_else" id="textinput12" placeholder="" value="" type="text">
                    </div>
                  </fieldset>

- patriques

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jorden van Foreest · Accepted Answer

你应该看一下jquerymobile中的两列布局： jquerymobile.com/demos/1.0.1/docs/content/content-grids.html 你的代码应该像这样：

<form action = "./includes/user_form.php" method="post" id = "form">
    <div class="ui-grid-a">
            <div data-role = "fieldcontain" class = "ui-hide-label ui-block-a">
                <label for="name">Name</label>
                <input type="text" name="name" id="name" value="" placeholder="Name" />
            </div>
            <div data-role ="fieldcontain" class= "ui-hide-label ui-block-b">
                <label for="surname">Surname</label>
                <input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
            </div>
    </div>
 </form>