如何使文字向左浮动？

Question

我怎样才能使li一直向左走？我试图将文本对齐，但它不起作用，还试图将浮点数向左移，但仍然有问题。有人知道您是否暗示我可以做些什么来使此文本在标题文本“Öppetider”下向左对齐。其下拉列表显示营业时间。

.dropdown {
  float: left;
  overflow: hidden;
  border: dashed 2px #a57354;
}

.dropdown .dropbtn {
  background-color: #2b272c;
  color: #a57354;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2b272c;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border: dashed 2px #a57354;
}

.dropdown-content a {
  color: black;
  padding: 12px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

ul {
  list-style-type: none;
}

li span {
  display: inline-block;
  width: 100px;
}

<div class="dropdown">
  <button class="dropbtn">
    OPPETIDER 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <h1> Öppettider</h1>
    <ul>
      <li>
        <span>Måndag</span>
        <span>10:00-19:00</span>
        <hr color="#4CAF50">
      </li>
      <li>
        <span>Tisdag</span>
        <span>10:00-19:00</span>
        <hr color="#4CAF50">
      </li>
      <li>
        <span>Onsdag</span>
        <span>10:00-19:00</span>
        <hr color="#4CAF50">
      </li>
      <li>
        <span>Torsdag</span>
        <span>10:00-19:00</span>
        <hr color="#4CAF50">
        <li>
          <span>Fredag</span>
          <span>10:00-19:00</span>
          <hr color="#4CAF50">
        </li>
      </li>
      <li>
        <span>Lördag</span>
        <span>10:00-19:00</span>
        <hr color="#4CAF50">
      </li>
      <li>
        <span>Söndag</span>
        <span>Stängt</span>
      </li>
    </ul>
  </div>
</div>