Позиционирование <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

Вы можете исправить это так:

.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 2

Я переделал ваш код.

Дайте мне знать, если вам это нравится.

#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>

Answer 3

Вы можете использовать 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>