如何在<li>内部使用右边的元素进行自动间隔

Question

我有一个无序列表。我正在使用bootstrap类。我想要的是，两个按钮的更新和删除必须始终在正确的极端，左侧文本的宽度必须自动调整，屏幕尺寸可以是最小尺寸。我是html和css的新手。请帮我把按钮放到右边。我已经为屏幕上添加了负责任的代码。

顶部显示我创建的列表，下面是负责它的代码：

Answer 1

对于文本位于li的{​​{1}}使用flexbox，按钮位于span内。使用弹性框之间的空格将使按钮向右对齐，文本向左对齐。

＆＃13;

＆＃13;

span

＆＃13;

ul {
  padding: 0;
  width: 60%;
}

li {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border: thin solid lightgray;
  padding: .5em;
}

.update {
  background: orange;
  color: white;
  margin-right: 0.5em;
  border: none;
  border-radius: 2px;
  padding: .3em;
}

.remove {
  background: red;
  color: white;
  border: none;
  border-radius: 2px;
  padding: .3em;
}

＆＃13;

＆＃13;

＆＃13;