编号的有序列表应与select-Element位于同一垂直线上

Question

我希望所选列表显示在与select元素相同的高度。

如果我删除左侧填充，则选择距离太远。

用填充物留下它离右边太远了。

我也不想给出填充左边的近似像素数来解决问题。有更优雅的解决方案吗？

.flex {
  display:flex;
  flex-wrap: wrap;
  align-items:center;
}

.flex > div {
  flex-basis:100%;
  margin-bottom: 30px;
  background-color: #555;
  height: 50px;
}

.flex > div span {
  display: inline-block;
  width: 50%;
} 

.flex > div > ol {
  display: inline-block;
}

<div class="flex">
  <div>
    <span>Lorem Ipsum</span>
    <select name="" id="">
      <option value="loremIpsum">Lorem Ipsum</option>
    </select>
  </div>
  
  <div>
    <span>Lorem</span>
    <ol>
      <li>
        <select name="" id="">
      <option value="lorem">Lorem</option>
    </select>
      </li>
    </ol>
  </div>
</div>

Answer 1

我会这样做，检查代码，你会看到我将它们包装在父div中并给它显示 flex 并定义第一个元素然后自动第二元素将在同一行开始，并确保样式 ol

padding: 0;
list-style-position: inside;

https://jsfiddle.net/62q6zrnr/2

＆＃13;

＆＃13;

   .one,
    .two {
      background-color: #ddd;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 30px;
    }

    .base {
      width: 50%;
      flex-basis: 50%;
    }


    ol {
     padding: 0;
     list-style-position: inside;
   }

＆＃13;

  <div class="one">
  <p class="base">lorem</p>
  <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</div>
<div class="two">
<p class="base">lorem 2</p>
    <ol>
      <li>
      <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
      <li>
        <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
      <li>
           <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
      <li>
        <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
      <li>
           <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
    </ol>
</div>

＆＃13;

＆＃13;

＆＃13;