表单元素与Google add-on样式表未对齐-并排输入框

Question

我试图创建一个在Google Apps脚本中使用简单样式的表单。

在添加Google add-on样式表时，文本输入和选择框变得不对齐。我需要他们并排坐着。

JS Fiddle example

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

<style>

select {
width: 80%;
}

.width-10 {
width: 10%;
}

</style>


<form>
<div class="options" id="option1">

<input type="text" class="width-10" id="user-input1" value="" tabindex=8>
<select id="user-input6" tabindex=1></select><br>

<input type="text" class="width-10" id="user-input2" value="" tabindex=9>
<select id="user-input7" tabindex=2></select><br>

</div>
</form>

Answer 1

因为您使用的是Google Add-ons的官方样式表，所以可以使用inline类。这将并排放置文本输入字段和选择选项列表。

<div class="inline form-group">
  <label for="email">Your email:</label>
  <input type="email" class="form-control" id="email" placeholder="you@gmail.com" value="example@gmail.com" required>
</div>

<div class="inline form-group">
  <label for="eventName">What's the topic?</label>
  <input type="text" class="form-control" id="eventName" value="App Testing" required>
</div>

您可能需要删除<style>标记中的CSS