Как я могу нарисовать границу между ячейкой и ячейкой? - PullRequest
Новая
       90

Как я могу нарисовать границу между ячейкой и ячейкой?

0 голосов
/ 16 марта 2020

Я хочу провести линию между ячейкой и ячейкой, но IDK, как это сделать. Поэтому я сделал левую линию вместо центральной линии. Я пишу этот вопрос, чтобы улучшить этот дизайн. (левая линия ячейки> строка между ячейкой и ячейкой) 

#menu li,
#menu li a {
  display: table-cell;
  border-bottom: 1px solid #DCDCDC;
}

#menu>li {
  border-left: 1px solid #DCDCDC;
}

#menu>li>a {
  display: table-cell;
  outline: inherit;
  outline-color: black;
}

#menu>li.active>a {
  color: white;
  background: #F2B470;
}
<div class="menu-bar">
  <div id="menu">
    <li class="active"><a href='#'>menu 1</a></li>
    <li><a href='#'>menu 2</a></li>
    <li><a href='#'>menu 3</a></li>
    <li><a href='#'>menu 4</a></li>
    <li><a href='#'>menu 5</a></li>
    <li><a href='#'>menu 6</a></li>
  </div>
</div>

1 Ответ

0 голосов
/ 16 марта 2020

Упростите, это то, что вы ищете? 

#menu li,
#menu li a {
display: inline-block;
  
}

 li a {
  display: inline-block;
  padding: 0 10px;
border-left: 1px solid black;
}

#menu > li.active > a {
color: white;
background: #F2B470;
}
<div class="menu-bar">
    <div id="menu">
        <li class="active"><a href='#'>menu 1</a></li>
        <li><a href='#'>menu 2</a></li>
        <li><a href='#'>menu 3</a></li>
        <li><a href='#'>menu 4</a></li>
        <li><a href='#'>menu 5</a></li>
        <li><a href='#'>menu 6</a></li>
    </div>
</div>
...