时间戳

首页 > 解决方案 > 垂直对齐标签并选择左侧的文本

html - 垂直对齐标签并选择左侧的文本

问题描述

我有一个简单的原生label和select元素堆叠。但是正如您在代码段中看到的那样，标签文本并未像这样与左侧的选择文本垂直对齐

在此处输入图像描述

select { 
 display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 100%
      );
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
    }
<label>Label</label>
<select class="select-css">
                <option>How to left align this text with label?</option>
                <option>Apples</option>
                <option>Bananas</option>
                <option>Grapes</option>
                <option>Oranges</option>
              </select>

编辑：我目前已经通过margin-left: -3px在select元素上使用 like 来强制它......

标签： htmlcss

解决方案

通常这将涉及浮点数，但对于现代 CSS3，您可以使用 Flexbox。将标签包裹并选择在容器中并display: flex在其上使用。默认的弹性项目行为将为您提供所需的对齐方式。

.flex-container {
  display: flex;
}
 <div class="flex-container">
  <label>Label</label>
  <select>
    <option>Option1</option>
    <option>Option2</option>
  </select>
</div>

推荐阅读