Bymas | тупой вопрос по border

Тема закрыта by

pyrokinesis
Причина: решено

Всем привет , такой вот тупой вопрос , просто конченый вопрос аж стыдно писать. делаю я менюшку для сайта. проблемка задалась в том что при обычном добавлении border:1px solid #000; внутренние рамки сливаются и получаются жирными. решил задать сторанны по отдельности кроме правой рамки. тогда все нормалек, но крайней рамки нет. или как можно сделать что бы внутение рамки не сливались? мне отступы margin:; не нужны. надеюсь вы поняли

css

   .foot li { padding:4px; text-align:center; width:60px; height:50px; border-left:1px solid #000; border-right:-1px solid #000; border-top:1px solid #000; border-bottom:1px solid #000;  }

Изображение

------

82493_14072022215556.jpg (31.2 Kb)
Скачиваний: 129

Пожалуйста. https://codepen.io/borkowsky/pen/XWENVbr?editors=1100
Тупой или не тупой вопрос -- в любом случае спрашивай, этот сайт изначально создан для помощи новичкам.
________
посл. ред. 14.07.2022 в 22:50; всего 1 раз(а); by REWERK

REWERK , спасибо , я просто с flex еще не работал, ну понтие понимаю что такое,

спасибо,

155876556 , html разметку можно взглянуть?

Бери цвет по светлее

Sovet , вот пример

html

   echo "<ul class='foot'>"; echo "<li><a href='/konts.php?".(isset($kont)?'type='.$kont['type']:null)."'><img src='/style/themes/$set[set_them]/svg/kont.svg' width='30' height='30'>Список контактов</a></li>\n"; echo "<li><a href='/konts.php?".(isset($kont)?'type='.$kont['type']:null)."'><img src='/style/themes/$set[set_them]/svg/kont.svg' width='30' height='30'>Список контактов</a></li>\n"; echo "<li><a href='/konts.php?".(isset($kont)?'type='.$kont['type']:null)."'><img src='/style/themes/$set[set_them]/svg/kont.svg' width='30' height='30'>Список контактов</a></li>\n"; echo "<li><a href='/konts.php?".(isset($kont)?'type='.$kont['type']:null)."'><img src='/style/themes/$set[set_them]/svg/kont.svg' width='30' height='30'>Список контактов</a></li>\n";  echo "</div>";

сделал так , только проблема с выравниванием , он не по середине а ближе к правой стороне становится.

css

   .foot { background:rgb(214,232,237); width:109%; list-style-type: none;   list-style-position: none;   display: flex;   justify-content:center; }   .foot > li  {   border: 1px solid #707070;   width: 4rem;   height: 4rem;   display: flex;   text-align:center;   align-items: center;   justify-content: center;   border-right: none;   border-top:none;   border-bottom:none;     padding:5px;  } .foot> li:last-child {    border-right: 1px solid #707070; }

Изображение

------

82495_15072022011652.jpg (22.4 Kb)
Скачиваний: 134

155876556 (15.07.2022 в 01:17) Sovet , вот пример

html

   echo "<ul class='foot'>"; echo "<li><a href='/konts.php?".(isset($kont)?'type='.$kont['type']:null)."'><img src='/style/themes/$set[set_them]/svg/kont.svg' width='30' height='30'>Список контактов</a></li>n"; echo "<li><a href='/konts.php?".(isset($kont)?'type='.$kont['type']:null)."'><img src='/style/themes/$set[set_them]/svg/kont.svg' width='30' height='30'>Список контактов</a></li>n"; echo "<li><a href='/konts.php?".(isset($kont)?'type='.$kont['type']:null)."'><img src='/style/themes/$set[set_them]/svg/kont.svg' width='30' height='30'>Список контактов</a></li>n"; echo "<li><a href='/konts.php?".(isset($kont)?'type='.$kont['type']:null)."'><img src='/style/themes/$set[set_them]/svg/kont.svg' width='30' height='30'>Список контактов</a></li>n";  echo "</div>";

сделал так , только проблема с выравниванием , он не по середине а ближе к правой стороне становится.

css

   .foot { background:rgb(214,232,237); width:109%; list-style-type: none;   list-style-position: none;   display: flex;   justify-content:center; }   .foot > li  {   border: 1px solid #707070;   width: 4rem;   height: 4rem;   display: flex;   text-align:center;   align-items: center;   justify-content: center;   border-right: none;   border-top:none;   border-bottom:none;     padding:5px;  } .foot> li:last-child {    border-right: 1px solid #707070; }

css

   .foot {  background:rgb(214,232,237);  width:109%;  list-style-type: none;    list-style-position: none;    display: flex;    justify-content:center;     }      .foot > li  {    border: 1px solid #707070;    width: 4rem;    height: 4rem;    text-align:center;    padding:5px;    border-right: none;  }  .foot> li:nth-last-child(-n+2) {     border-right: 1px solid #707070;      }

Sovet , без изминений ((((

155876556 , куки почисти

155876556 (15.07.2022 в 06:39)
Sovet , без изминений ((((

Становится ближе к правой стороне,потому что ширина указана в 109%. Измени на 100%.