Question

我一直在尝试在我的网站上创建一个表单，并希望将两个选择框放在一起。我设法通过两种方式实现了这一点，首先使用flexbox，现在我尝试使用table和table-cell来查看它是否会产生任何影响。

我两个都可以在我的电脑上工作了，但是当我在手机上查看时，我发现无论我使用哪个选择框，它总是会编辑第一个框的值（这只发生在我的手机和不在我的电脑上，这是我不明白的事情）

我的代码：

<label>Km-stand
<div style="display:table">
<div style="display:table-cell">
  <select name="km-van" >
  <option value="">Van</option>
  <option value="1">1</option>
  <option value="5000">5.000</option>
  <option value="10000">10.000</option>
  <option value="20000">20.000</option>
  <option value="40000">40.000</option>
  <option value="60000">60.000</option>
  <option value="80000">80.000</option>
  <option value="100000">100.000</option>
  </select>
</div>
<div style="display:table-cell">
  <select name="km-tm" >
  <option value="">T/m</option>
  <option value="5000">5.000</option>
  <option value="10000">10.000</option>
  <option value="20000">20.000</option>
  <option value="40000">40.000</option>
  <option value="60000">60.000</option>
  <option value="80000">80.000</option>
  <option value="100000">100.000</option>
  </select>
</div>
</div>
</label>

这里还有一个JSFiddle：https://jsfiddle.net/p0qh6zbf/2/

编辑：一个快速跟进的问题，最好是为此使用flexbox或表吗？

Answer 1

我想出了这个问题，虽然它只发生在移动版Safari中，但是对我来说固定的是关注标签，而不是选择之后。像这样：

<label>Km-stand</label>
<div style="display:table">
<div style="display:table-cell">
  <select name="km-van" >
  <option value="">Van</option>
  <option value="1">1</option>
  <option value="5000">5.000</option>
  <option value="10000">10.000</option>
  <option value="20000">20.000</option>
  <option value="40000">40.000</option>
  <option value="60000">60.000</option>
  <option value="80000">80.000</option>
  <option value="100000">100.000</option>
  </select>
</div>
<div style="display:table-cell">
  <select name="km-tm" >
  <option value="">T/m</option>
  <option value="5000">5.000</option>
  <option value="10000">10.000</option>
  <option value="20000">20.000</option>
  <option value="40000">40.000</option>
  <option value="60000">60.000</option>
  <option value="80000">80.000</option>
  <option value="100000">100.000</option>
  </select>
</div>
</div>

HTML 2选择框始终影响第一个框

1 个答案: