将 <img> 元素定位在 <span> 元素中，这两个元素都在 <li> 元素中？

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>

看起来像这样：

我必须这样做：

我怎样才能做到这一点？

Answer 1

您可以对 li 元素使用 position: relative;，对于内部跨度使用 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>

Answer 2

你可以这样修复：

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

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

这里有一个演示：

#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: sticky;
}

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

.menu {
  position: absolute;
  right: 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>

Answer 3

我对您的代码进行了修改。

如果喜欢请告诉我。

#left ul {
  width: 250px;
  list-style-type: none;
  padding: 0;
  border: 2px solid red;
}
#left ul li a {
  padding: 3px 0 3px 15px;
  color: red;
  font-weight: bold;
  text-transform:capitalize;
  text-decoration: none;
}
#left ul li {  
  display: flex;
  justify-content: space-between;
}

#left ul li .reverse-flag {
  position: relative;
  width: 22px;
  border-style: solid;
  border-width: 0 0 25px 15px;
  border-color: red transparent red transparent;
}
#left ul li img {
  position: absolute;
  top: 0;
  right: 0;
}
#left ul li:not(:last-child) {
  border-bottom: 2px solid red;
}

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

    <div class="reverse-flag">
     <img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></div>
   </li>
   <li><a href="#">medical center</a>
                <div class="reverse-flag"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></div>
        </li>
   <li><a href="#">medical smtg</a>
                <div class="reverse-flag"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></div>

      </li>
   <li><a href="#">medical smtg2</a>
        
                <div class="reverse-flag"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></div>
      </li>
   <li><a href="#">medical smtg3</a>
                <div class="reverse-flag"><img src="https://pluspng.com/img-png/free-png-plus-sign-plus-icon-512.png" width="25px" ></div>
      </li>
  </ul>
 </nav>
</div>

将 <img> 元素定位在 <span> 元素中，这两个元素都在 <li> 元素中？

Positioning <img> element inside <span> element which both are in <li> element?

html

css

css-float

html-lists