html - 我怎样才能实现左上角的删除图标

Question

我无法将删除图标与顶部对齐。这是我试过的

.skills ul {
  width: 100%;
  margin: 10px 0px 0px 0px;
  padding: 0px;
  float: left;
}

.skills li {
  border: 1px solid #a7dbf5;
  list-style: none;
  text-decoration: none;
  text-transform: capitalize;
  padding: 7px 10px 0px 10px;
  background: #bee5f9;
  color: #074c6f;
  font-size: 13px;
  text-align: left;
  float: left;
  border-radius: 50px;
  margin: 3px 6px;
  height: 31px;
}

<span class="skills">
  <ul id="loaded_skills">
    <li class="skills_selector current_selected_skill" value="3"> AJAX
      <input type="checkbox" name="skills" value="3" style="display:none">
      <a href="#">x</a>
    </li>
    <li class="skills_selector current_selected_skill" value="6"> Action Script 3.0 (Mac Version)
      <input type="checkbox" name="skills" value="6" style="display:none">
      <a href="#">x</a>
    </li>
  </ul>
</span>

Answer 1

尝试添加到您的 css:

.skills_selector {
  position: relative;
}

.skills_selector a {
  position: absolute;
  top: 0;
  left: 25px;
  transform: translateY(-50%);
}