Question

有点坚持这个问题。如果需要，我可以轻松地将标签和输入放在同一行上，或者在需要时在单独的行上放置......但是，到目前为止，尝试在1行上完成标签，并且输入和选择一起是徒劳的任务。

所以，我尝试了...我尝试将标签设置为块元素，输入并选择两个内联块。你可以看到我的2个注释掉的CSS规则。我尝试将标签宽度设为100％等等。

它要么全部在3对1线上，要么全部3作为块。我有一种感觉，因为标签缠绕在它们周围，但这不重要，因为我可以轻松操作标签和输入，但是当涉及到标签，输入时，请选择它并不需要工作......

我想到的一种丑陋丑陋的方法是绝对定位选择，但我希望有更合适的方法来做到这一点。（不确定这是否会起作用）。我尽可能选择一个干净的解决方案和绝对定位，这似乎是一种尝试修复它的糟糕方法。我可能会有一些容易忽视的东西...这就是我在这里的原因。：）

有什么想法吗？（我也不太关心旧浏览器）

我正在寻找的是......（根据小提琴）

... 城市（这是一个标签，坐在这里）
（在标签下输入）

电话号码（此处的标签）
（在这里输入）（在这里选择） ...

＆＃13;

.form-outer-container,
.primary-button {
  font-size: 1.025em;
}

.form-outer-container {
  padding: 8px 12px;
  background-color: #FCFCFC;
  border-radius: 3px;
  width: 100%;
  overflow: auto;
  display: inline-block;
}

ul {
  margin: 0;
  padding: 0;
}

ul > li {
  list-style: none;
  margin: 3px 0 0 0;
  padding: 2px 2px;
}

li > label {
  display: block;
  text-align: left;
}

li > label > input,
li > label > textarea {
  display: block;
}

li > label > input[type="checkbox"] {
  display: inline;
}

input[type="text"],
input[type="password"],
textarea {
  color: #0a290a;
  border: 1px solid darkgrey;
}

.label-input-select-combo > input,
.label-input-select-combo > select {
  /* display: inline-block; */
}

.label-input-select-combo {
  /* display: block !important; */
}

＆＃13;

<ul>
  <li>
    <label>Address
      <textarea rows="3"></textarea>
    </label>
  </li>
  <li>
    <label>City
      <input type="text" data-bind="city" placeholder="Oshawa" tabindex="3">
    </label>
  </li>
  <li>
    <label>Country
      <input type="text" data-bind="country" placeholder="Canada" tabindex="5">
    </label>
  </li>
</ul>
<ul>
  <li class="editor sub-editor" data-rest-path="/api/actphone" data-parent-id="cid">
    <label class="label-input-select-combo">Phone number
      <input type="text" data-bind="phone" placeholder="905-999-3590" tabindex="6">
      <select data-bind="type">
        <option value="M">Mobile</option>
        <option value="W" selected>Work</option>
        <option value="H">Home</option>
        <option value="O">Other</option>
      </select>
    </label>
  </li>
  <li>
    <button type="button" class="primary-button editor-save">Create</button>
  </li>
</ul>

＆＃13;

Answer 1

以下是两种可能的选择：

输入电话号码输入并在<span>中选择下拉菜单，并<span> display: flex;
在标签文字后添加<br/>代码，然后提供input display: inline-block;

像这样：

＆＃13;

.form-outer-container,
.primary-button {
  font-size: 1.025em;
}

.form-outer-container {
  padding: 8px 12px;
  background-color: #FCFCFC;
  border-radius: 3px;
  width: 100%;
  overflow: auto;
  display: inline-block;
}

ul {
  margin: 0;
  padding: 0;
}

ul > li {
  list-style: none;
  margin: 3px 0 0 0;
  padding: 2px 2px;
}

li > label {
  display: block;
  text-align: left;
}

li > label > input,
li > label > textarea {
  display: block;
}

li > label > input[type="checkbox"] {
  display: inline;
}

input[type="text"],
input[type="password"],
textarea {
  color: #0a290a;
  border: 1px solid darkgrey;
}

.input-block {
  display: flex;
}

.input--left {
  display: inline-block;
}

＆＃13;

<ul>
  <li>
    <label>Address
      <textarea rows="3"></textarea>
    </label>
  </li>
  <li>
    <label>City
      <input type="text" data-bind="city" placeholder="Oshawa" tabindex="3">
    </label>
  </li>
  <li>
    <label>Country
      <input type="text" data-bind="country" placeholder="Canada" tabindex="5">
    </label>
  </li>
</ul>
<ul>
  <li class="editor sub-editor" data-rest-path="/api/actphone" data-parent-id="cid">
    <label>Phone number
      <span class="input-block">
      <input type="text" data-bind="phone" placeholder="905-999-3590" tabindex="6">
      <select data-bind="type">
        <option value="M">Mobile</option>
        <option value="W" selected>Work</option>
        <option value="H">Home</option>
        <option value="O">Other</option>
      </select>
      </span>
    </label>
  </li>
  <li class="editor sub-editor" data-rest-path="/api/actphone" data-parent-id="cid">
    <label class="label-input-select-combo">Phone number<br/>
      <input type="text" class="input--left" data-bind="phone" placeholder="905-999-3590" tabindex="6">
      <select data-bind="type">
        <option value="M">Mobile</option>
        <option value="W" selected>Work</option>
        <option value="H">Home</option>
        <option value="O">Other</option>
      </select>
    </label>
  </li>
  <li>
    <button type="button" class="primary-button editor-save">Create</button>
  </li>
</ul>

＆＃13;

Answer 2

输入为全宽。您需要将其设置为内联块。这将把它放在同一条线上，以及之前的内容和之后的内容。将<br />放在＆＃34;电话号码＆＃34;之后或者放一个div＆＃34;电话号码＆＃34;所以它不在输入的同一行。

Answer 3

您要将所有内容包装在标签标签中。标签标签仅供说明。你需要改变：

<label class="label-input-select-combo">Phone number</label>
<input type="text" data-bind="phone" placeholder="905-999-3590" tabindex="6">
<select data-bind="type">
  <option value="M">Mobile</option>
  <option value="W" selected>Work</option>
  <option value="H">Home</option>
  <option value="O">Other</option>
</select>

JsFiddle

将标签放在1行并在下一行输入和选择时遇到问题

3 个答案: