blocks|key|4134948|text|这就是你要找的东西吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4134949|关键字是text-align-last:right;，它将选择项带到右侧|offset|length|style|CODE|4134950|​|4134951|label+{
++display:+inline-block;
++min-width:+200px;
++background:#DDD;
}

.itemRight+{
++min-width:+200px;
}

select+{
+++text-align-last:right;
}

#field-qty-num,+option+{
++width:+204px;
++text-align:+center;
}|code-block|syntax|javascript|4134952|<div+class="field-group">

++<div+style=""+class="field+field--with-dropdown+clearfix">
++++<label+for="field-qty">License+Quantity</label>
++++<select+style=""+class="itemRight"+id="field-qty-num"+onchange="qty_change()">
++++++<option>1</option>
++++++<option>2</option>
++++++<option>3</option>
++++++<option>4</option>
++++++<option>5</option>
++++++<option>6</option>
++++++<option>7</option>
++++++<option>8</option>
++++++<option>9</option>
++++</select>

++</div>

++<div+class="field">
++++<label+for="field-phone">User+Training+Manual</label>
++++<input+id="field-phone"+type="text"+class="itemRight+form-control"+style="text-align:+center;"+placeholder="Included+for+free!"+readonly+/>
++</div>

++<div+class="field">
++++<label+for="field-phone">User+Training+Videos</label>
++++<input+id="field-phone"+type="text"+class="itemRight+form-control"+style="text-align:+center;"+placeholder="Included+for+free!"+readonly+/>
++</div>

++<div+class="field">
++++<label+for="field-phone">6+Months+Tech+Support</label>
++++<input+id="field-phone"+type="text"+style="text-align:+center;"+class="itemRight+form-control"+placeholder="Included+for+free!"+readonly+/>
++</div>
</div>|4134953|4134954|entityMap^0|0|4|M|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Y|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>Is this what you are looking for ?</p>

<p>The key is <code>text-align-last:right;</code>, that brings the select items to the right side</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>label {
  display: inline-block;
  min-width: 200px;
  background:#DDD;
}

.itemRight {
  min-width: 200px;
}

select {
   text-align-last:right;
}

#field-qty-num, option {
  width: 204px;
  text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="field-group"&gt;

  &lt;div style="" class="field field--with-dropdown clearfix"&gt;
    &lt;label for="field-qty"&gt;License Quantity&lt;/label&gt;
    &lt;select style="" class="itemRight" id="field-qty-num" onchange="qty_change()"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
      &lt;option&gt;6&lt;/option&gt;
      &lt;option&gt;7&lt;/option&gt;
      &lt;option&gt;8&lt;/option&gt;
      &lt;option&gt;9&lt;/option&gt;
    &lt;/select&gt;

  &lt;/div&gt;

  &lt;div class="field"&gt;
    &lt;label for="field-phone"&gt;User Training Manual&lt;/label&gt;
    &lt;input id="field-phone" type="text" class="itemRight form-control" style="text-align: center;" placeholder="Included for free!" readonly /&gt;
  &lt;/div&gt;

  &lt;div class="field"&gt;
    &lt;label for="field-phone"&gt;User Training Videos&lt;/label&gt;
    &lt;input id="field-phone" type="text" class="itemRight form-control" style="text-align: center;" placeholder="Included for free!" readonly /&gt;
  &lt;/div&gt;

  &lt;div class="field"&gt;
    &lt;label for="field-phone"&gt;6 Months Tech Support&lt;/label&gt;
    &lt;input id="field-phone" type="text" style="text-align: center;" class="itemRight form-control" placeholder="Included for free!" readonly /&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4134663|text|在没有硬编码特定宽度的情况下，您可以使用flexbox方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4134664|<div+style="display:flex;justify-content:space-between;/*or+space-evenly*/"+class="field+field--with-dropdown+clearfix">+
<label+for="field-qty">License+Quantity</label>
+<select+id="field-qty-num"+onchange="qty_change()">+
<option>1</option>+
<option>2</option>+
<option>3</option>+
<option>4</option>+
<option>5</option>
<option>6</option>+
<option>7</option>
<option>8</option>
<option>9</option>
</select>+</div>|code-block|syntax|javascript|4134665|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Without hardcoding a specific width, you could go for a flexbox approach:</p>

<pre><code>&lt;div style="display:flex;justify-content:space-between;/*or space-evenly*/" class="field field--with-dropdown clearfix"&gt; 
&lt;label for="field-qty"&gt;License Quantity&lt;/label&gt;
 &lt;select id="field-qty-num" onchange="qty_change()"&gt; 
&lt;option&gt;1&lt;/option&gt; 
&lt;option&gt;2&lt;/option&gt; 
&lt;option&gt;3&lt;/option&gt; 
&lt;option&gt;4&lt;/option&gt; 
&lt;option&gt;5&lt;/option&gt;
&lt;option&gt;6&lt;/option&gt; 
&lt;option&gt;7&lt;/option&gt;
&lt;option&gt;8&lt;/option&gt;
&lt;option&gt;9&lt;/option&gt;
&lt;/select&gt; &lt;/div&gt;
</code></pre>


<p>I have the following select in a row of stuff that I'd like to better align/space out onto the right side:</p>
<p><a href="https://i.stack.imgur.com/z5Xxt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z5Xxt.png" alt="enter image description here" /></a></p>
<p>I.e. the select next to &quot;License Quantity&quot;. I would like to move the number more on the right, as would look more visually appropriate.</p>
<p>Code below:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="field-group"&gt;

  &lt;div style="text-align: center;" class="field field--with-dropdown clearfix"&gt;
    &lt;label for="field-qty"&gt;License Quantity&lt;/label&gt;
    &lt;select style="text-align: center; margin-left: 25em" id="field-qty-num" onchange="qty_change()"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
      &lt;option&gt;6&lt;/option&gt;
      &lt;option&gt;7&lt;/option&gt;
      &lt;option&gt;8&lt;/option&gt;
      &lt;option&gt;9&lt;/option&gt;
    &lt;/select&gt;

  &lt;/div&gt;

  &lt;div class="field"&gt;
    &lt;label for="field-phone"&gt;User Training Manual&lt;/label&gt;
    &lt;input id="field-phone" type="text" class="form-control" style="text-align: center;" placeholder="Included for free!" readonly /&gt;
  &lt;/div&gt;

  &lt;div class="field"&gt;
    &lt;label for="field-phone"&gt;User Training Videos&lt;/label&gt;
    &lt;input id="field-phone" type="text" class="form-control" style="text-align: center;" placeholder="Included for free!" readonly /&gt;
  &lt;/div&gt;

  &lt;div class="field"&gt;
    &lt;label for="field-phone"&gt;6 Months Tech Support&lt;/label&gt;
    &lt;input id="field-phone" type="text" style="text-align: center;" class="form-control" placeholder="Included for free!" readonly /&gt;
  &lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>


HTML CSS how to center select in other column

我在一行内容中选择了以下内容，以便更好地在右侧对齐/间隔：​​即选择"License Quantity“旁边的。我想将数字更多地移到右侧，这样看起来更合适。代码如下：​<div class="field-group">  <div style="text-align: center;" class="field fie...

问HTML CSS如何在其他列中居中选择
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML CSS如何在其他列中居中选择EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML CSS如何在其他列中居中选择
EN