html - 将元素定位在两者都在的元素内元素？

Question

我有这个：

#left {
  float: left;
  width: 40%;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  border-bottom: 2px solid red;
  border-left: 2px solid red;
  border-right: 2px solid red;
}

nav ul li a {
  text-decoration: none;
}

.menu {
  float: right;
}

<div id="left">
  <nav>
    <ul>
      <li>
        <a href="#">medical center</a>
        <span class="menu">
          <img src="https://i.stack.imgur.com/Af2zp.png" width="25px">
        </span>
      </li>
      <li>
        <a href="#">medical tips</a>
        <span class="menu">
          <img src="https://i.stack.imgur.com/Af2zp.png" width="25px">
        </span>
      </li>
      <li>
        <a href="#">medical center</a>
        <span class="menu">
          <img src="https://i.stack.imgur.com/Af2zp.png" width="25px">
        </span>
      </li>
      <li>
        <a href="#">medical smtg</a>
        <span class="menu">
          <img src="https://i.stack.imgur.com/Af2zp.png" width="25px">
        </span>
      </li>
      <li>
        <a href="#">medical smtg2</a>
        <span class="menu">
          <img src="https://i.stack.imgur.com/Af2zp.png" width="25px">
        </span>
      </li>
      <li>
        <a href="#">medical smtg3</a>
        <span class="menu">
          <img src="https://i.stack.imgur.com/Af2zp.png" width="25px">
        </span>
      </li>
    </ul>
  </nav>
</div>

看起来像这样：

我必须这样做：

我怎样才能做到这一点？

标签： htmlcsscss-floathtml-lists

Answer 1

您可以使用position: relative;元素li和内部跨度使用position: absolute; right: 0;

#left {
  float: left;
  width: 40%;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  border-bottom: 2px solid red;
  border-left: 2px solid red;
  border-right: 2px solid red;
  position: relative;
}

nav ul li a {
  text-decoration: none;
}

.menu {
  position: absolute;
  right: 0;
  top: 0;
}

<div id="left">
  <nav>
    <ul>
      <li><a href="#">medical center</a><span class="menu"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></span></li>
      <li><a href="#">medical tips</a><span class="menu"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></span></li>
      <li><a href="#">medical center</a><span class="menu"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></span></li>
      <li><a href="#">medical smtg</a><span class="menu"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></span></li>
      <li><a href="#">medical smtg2</a><span class="menu"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></span></li>
      <li><a href="#">medical smtg3</a><span class="menu"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></span></li>

    </ul>
  </nav>
</div>