HTML/CSS : Can't figure out how to get a divider in a box

Question

我对此很陌生，如果我的代码有点困惑，我深表歉意。我正在尝试创建一个求职页面，结果将显示如下栏:

我有点明白了，只是我无法在 PREV、1 到 100 和 NEXT 之间找到分隔符。我的看起来像这样:

这是我的代码:

HTML:

<div class="results">
    <a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
    <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
    <a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
  </div>

CSS:

.results {
    color: black;
    border: 1px solid lightgrey;
    width: 300px;
    padding: 5px;
    margin-top: 25px;
    margin-left: 60px;
    margin-bottom: 30px;
}

我已经尝试为每个链接制作一个结果类，但最终我在每个链接周围得到一个大盒子和 3 个小盒子。

Answer 1

.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
  display:flex;
}

.results a {
  color:#000;
  text-decoration:none;
  font-family:sans-serif;
}

.a, .c {
  flex:1;
  padding: 5px 0px;
  text-align:center;
}

.b {
  flex:2;
  padding: 5px 0px;
  text-align:center;
  border-right:1px solid lightgray;
  border-left:1px solid lightgray;
}

<div class="results">
    <div class="a"><a href="https://gregslist--farahgus10.repl.co/">&lt; Prev<a/></div>
   <div class="b"> <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/></div>
   <div class="c"> <a href="https://gregslist--farahgus10.repl.co/" >Next ><a/></div>
  </div>