Html 调整窗口大小时，如何将div容器内的链接保持在同一行上

在调整窗口大小时，我希望将其中的4个链接保持在同一行上，并在调整wndow大小时收缩，而不是相互重叠或移动到下一行。我该怎么做？我尝试使用内联块，但没有帮助。thw reply和reply分别向左和向右浮动，中间两个链接具有边距右侧间距，是相对位置

HTML:

---

如果我正确理解了您的问题，那么当显示大小达到文本太大而无法容纳一行时，您希望文本缩小

为了实现这一点，我将在媒体查询中使用字体大小。在下面的任意示例中，我定义了最小视口宽度200px，任何较小的值都会缩小文本

显然，你必须根据你的设计来考虑你想要使用的确切尺寸

---

当没有足够的空间时，您希望发生什么？水平滚动？无滚动。只需相应地缩小，或者至少在关闭时隐藏它，但不希望用户看到所有内容重叠并流入其他行

<div id="messages">
    <div class="comment__item">
        <div class="infos"><img src="../uploads/profile_pic-1517251850125.png"></div>
        <div class="content" id="5a7334dd43ce600d48720884">
            <h3 class="comment__authorname">lilly</h3><br><b class="comment__time">6 days ago</b><br>
            <p>luv me</p><br><a id="reply1" href="#" onclick="reply1(this)">1 Replies</a><a href="#" class="flatbanstart">Ban</a><a href="#" id="deletecom" onclick="deletecom(this)">Delete</a><a href="#" id="reply2" onclick="reply2(this)">Reply</a>
            <form
                class="flatbanform" style="display: none;"><input name="untildate" class="flatpickr flatpickr-input" type="hidden" placeholder="Ban until..." value="2018-02-07 11:58"><input class="flatpickr flatpickr-input form-control input" placeholder="Ban until..." type="text" readonly="readonly">
                <input
                    name="reason" type="text" placeholder="Reason..."><input class="comidban" name="comid" type="hidden"><input class="adminidban" name="admin" type="hidden"><button type="button" class="flatban" onclick="banuser.bind($(this))()">Ban Now</button></form>
                    <div id="ebolaf"></div>
        </div>
    </div><br>
    <div class="comment__item">
        <div class="infos"><img src="../uploads/profile_pic-1512409436797.jpg"></div>
        <div class="content" id="5a74ce6c4d31642adcc11782">
            <h3 class="comment__authorname">aizen</h3><br><b class="comment__time">5 days ago</b><br>
            <p>gg</p><br><a id="reply1" href="#" onclick="reply1(this)">0 Replies</a><a href="#" class="flatbanstart">Ban</a><a href="#" id="deletecom" onclick="deletecom(this)">Delete</a><a href="#" id="reply2" onclick="reply2(this)">Reply</a>
            <form class="flatbanform"
                style="display: none;"><input name="untildate" class="flatpickr flatpickr-input" type="hidden" placeholder="Ban until..." value="2018-02-07 11:58"><input class="flatpickr flatpickr-input form-control input" placeholder="Ban until..." type="text" readonly="readonly">
                <input
                    name="reason" type="text" placeholder="Reason..."><input class="comidban" name="comid" type="hidden"><input class="adminidban" name="admin" type="hidden"><button type="button" class="flatban" onclick="banuser.bind($(this))()">Ban Now</button></form>
            <div id="ebolaf"></div>
        </div>
    </div><br></div>

#reply1{
  text-decoration: none;
  position:relative;
  float:left;
  color:black;
  white-space:nowrap;
}

#reply2{

  text-decoration: none;
  position:relative;
  margin:auto;
  float:right;
  color:black;
  white-space:nowrap;

}

#deletecom{

  text-decoration: none;
  position:relative;
  margin-right:20px;
  color:red;
  white-space:nowrap;


}

.flatbanstart{

  text-decoration: none;
  overflow: auto;
  position:relative;
  margin-right:20px;
  color:red;
  white-space:nowrap;
}


.content {


  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  float: left;
  margin-left: 20px;
  padding: 5% 5% 5% 5%;


  border-width: 1px 4px 4px 3px;
  border-style: solid;
  border-color: #c8c7b4;
  background-color: #ece5bd;

  /*background-image: -linear-gradient(0deg, transparent 18px, #dbada9 0, #dbada9 20px, transparent 19px),
                    -linear-gradient(#e1dab0 0.1em, transparent 0.1em);
  background-image: -webkit-linear-gradient(0deg, transparent 11px, #dbada9 0, #dbada9 14px, transparent 12px),
                    -webkit-linear-gradient(#e1dab0 0.1em, transparent 0.1em);
  background-image: -moz-linear-gradient(0deg, transparent 11px, #dbada9 0, #dbada9 13px, transparent 12px),
                    -moz-linear-gradient(#e1dab0 0.1em, transparent 0.1em);

  */
  background-size: 100% 10px;
  color: #333;
  width: 73%;
  display: block;
  overflow:hidden;
  white-space:nowrap;

}

<div class="wrapper">
    <a href="#">One</a> | 
    <a href="#">Two</a> | 
    <a href="#">Three</a>
</div>

.wrapper {
    background: #D0D0D0;
    padding: 5px;
    width: 200px;
}

@media (max-width: 200px) {
    .wrapper {
        width: 100%;
        font-size: 8vw;
    }
}