如何在左上角删除图标

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：

120px

Answer 2

试试这个。

＆＃13;

＆＃13;

.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 40px;
    background: #bee5f9;
    color: #074c6f;
    font-size: 13px;
    text-align: left;
    float: left;
    border-radius: 50px;
    margin: 3px 6px;
    position: relative;
}

.skills .remove {
  position: absolute;
  top: 0;
  transform: translate(0, -50%);
  color: red;
  left: 20px;
  text-decoration: none;
}

＆＃13;

<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="#" class='remove'>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="#" class='remove'>x</a>
                </li>
            </ul>
        </span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要使用position:absolute作为关闭图标，并使用top和left值来对齐它...还要记住将position:relative设置为其父{ {1}}

li

.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;
  position: relative;
}

.skills li a {
  position: absolute;
  top: -10px;
  left: 0px;
  background: red;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

Answer 4

希望这可以满足您的需求

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

.skills li {
  position:relative;
    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;
}
.skills li>a{
  position:absolute;
  padding:3px;
  top:-15px;
  background-color:orange;
  color:white;
  border-radius:50%;
}