无法将标签放在 1 行并在下一行输入和选择一起

Question

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

所以，我尝试了什么...我尝试将标签设为块元素，并将输入和选择两个内联块。你可以看到我的 2 条注释掉了我正在尝试的 CSS 规则。我尝试将标签设置为宽度 100% 和其他内容。

它要么在 1 行上全部 3 个，要么全部 3 个块。我有一种感觉，这是因为标签包裹在它们周围，但这无关紧要，因为我可以轻松操作标签和输入，但是当涉及到标签时，输入，选择它不想工作......

我想到的一种丑陋的丑陋方法是绝对定位选择，但我希望有一种更合适的方法来做到这一点。 （不确定这是否可行）。我更喜欢尽可能干净的解决方案，绝对定位这似乎是尝试修复它的糟糕方法。我可能忽略了一些容易的事情......这就是我在这里的原因。 :)

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

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

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

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

.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; */
}

<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>

Answer 1

这里有两种可能的选择：

1. 将电话号码输入和选择下拉列表中的<span> 并给<span> 一个display: flex;

2. 在标签文本后添加<br/>标签，然后给input一个display: inline-block;

像这样：

.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;
}

<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>

Answer 2

输入是全宽的。您需要将其设置为内联块。这将把它放在同一行，它之前和之后是什么。将<br /> 放在“电话号码”之后或在“电话号码”周围放置一个 div，使其不在输入的同一行。

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