HTML CSS如何在其他列中居中选择
HTML CSS如何在其他列中居中选择
提问于 2018-07-11 05:19:35
我在一行内容中选择了以下内容，以便更好地在右侧对齐/间隔：
即选择"License Quantity“旁边的。我想将数字更多地移到右侧，这样看起来更合适。
代码如下：
<div class="field-group">
<div style="text-align: center;" class="field field--with-dropdown clearfix">
<label for="field-qty">License Quantity</label>
<select style="text-align: center; margin-left: 25em" 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="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="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="form-control" placeholder="Included for free!" readonly />
</div>
</div>
回答 2
Stack Overflow用户
发布于 2018-07-11 05:28:19
这就是你要找的东西吗？
关键字是text-align-last:right;，它将选择项带到右侧
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;
}<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>
Stack Overflow用户
发布于 2018-07-11 05:35:51
在没有硬编码特定宽度的情况下，您可以使用flexbox方法：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51274044
复制相关文章
相似问题
腾讯云开发者
