Граница перекрывает дочерний элемент и дочерний элемент li

Я пытаюсь создать рамку с рамкой, используя ul li,

Я применил границы, но проблема в том, что когда я применил нижнюю границу и верхнюю границу для li, первая граница 1px border-bottom перекрывается со второй li border-top и выглядит как граница 2px.

Мой код ниже,

.main-permissions-box{
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
  border-left: 1px solid #555;
  width: 380px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.main-permissions-box li{
  list-style-type: none;
  padding:8px;
  border-top:1px solid #555;
  border-bottom:1px solid #555;
}
.main-permissions-box > ul> li{
  border-bottom:1px solid #555;
}
.main-permissions-box > li:first-child{
  border-top: 1px solid #555;
}
.main-permissions-box ul ul li{
  border-left:1px solid #555;
}
.main-permissions-box > ul{
  padding: 0;margin: 0;
}
.permission-text{
  padding-left: 25px;
}

<div class = "modal fade assign-menu-popup" role = "dialog" id = "assign_menu_modal">
  <div class = "modal-dialog" role = "document">
	<div class = "modal-content clearfix">
  	<div class = "main-permissions-box">
		<ul>
			<li class = "label-check">
        <input type = "checkbox" class = "checkBoxClass">
				<span class = "permission-text">Pre Sales</span>
			</li>
			<ul>
				<li class = "label-check">
				  <input type = "checkbox" class = "checkBoxClas">
				<span class = "permission-text">Schedule Consultation</span>
				</li>
				<ul>
					<li class = "label-check">
					  <input type = "checkbox" class = "checkBoxClass">
				<span class = "permission-text">Option One</span>
					</li>
					<li class = "label-check">
					  <input type = "checkbox" class = "checkBoxClass">
				<span class = "permission-text">Option Two</span>
					</li>
				</ul>
			</ul>
		</ul>
		<ul>
			<li class = "label-check">
				 <input type = "checkbox" class = "checkBoxClass">
         <span class = "permission-text">Schedule Consultation</span>
			</li>
		</ul>
		<ul>
			<li class = "label-check">
				  <input type = "checkbox" class = "checkBoxClass">
          <span class = "permission-text">Customer</span>
			</li>
		</ul>
		</div>
		<div class = "clearfix"></div>
	</div>
  </div>
</div>

Есть ли способ применить границу, чтобы она не выглядела так, как будто она перекрывается?

html css twitter-bootstrap

27.06.2018 12:22

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Примените margin-bottom к элементам списка. Вот код:

    .main-permissions-box{
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
  border-left: 1px solid #555;
  width: 380px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.main-permissions-box li{
  list-style-type: none;
  padding:8px;
  border-top:1px solid #555;
  border-bottom:1px solid #555;
}
.main-permissions-box > ul> li{
  border-bottom:1px solid #555;
  margin-bottom:-1px;
}
.main-permissions-box > li:first-child{
  border-top: 1px solid #555;
}
.main-permissions-box ul ul li{
  border-left:1px solid #555;
  margin-bottom:-1px;
}
.main-permissions-box > ul{
  padding: 0;margin: 0;
}
.permission-text{
  padding-left: 25px;
}

<div class = "modal fade assign-menu-popup" role = "dialog" id = "assign_menu_modal">
  <div class = "modal-dialog" role = "document">
	<div class = "modal-content clearfix">
  	<div class = "main-permissions-box">
		<ul>
			<li class = "label-check">
        <input type = "checkbox" class = "checkBoxClass">
				<span class = "permission-text">Pre Sales</span>
			</li>
			<ul>
				<li class = "label-check">
				  <input type = "checkbox" class = "checkBoxClas">
				<span class = "permission-text">Schedule Consultation</span>
				</li>
				<ul>
					<li class = "label-check">
					  <input type = "checkbox" class = "checkBoxClass">
				<span class = "permission-text">Option One</span>
					</li>
					<li class = "label-check">
					  <input type = "checkbox" class = "checkBoxClass">
				<span class = "permission-text">Option Two</span>
					</li>
				</ul>
			</ul>
		</ul>
		<ul>
			<li class = "label-check">
				 <input type = "checkbox" class = "checkBoxClass">
         <span class = "permission-text">Schedule Consultation</span>
			</li>
		</ul>
		<ul>
			<li class = "label-check">
				  <input type = "checkbox" class = "checkBoxClass">
          <span class = "permission-text">Customer</span>
			</li>
		</ul>
		</div>
		<div class = "clearfix"></div>
	</div>
  </div>
</div>

Увеличьте маржу на желаемую сумму. Надеюсь, это то, что вам нужно.

он дает пробелы между li, и я не хочу, чтобы эти пробелы

— 27.06.2018 12:33

@charankumar Этот ответ очень близок, и вы не очень хорошо сформулировали свою проблему. Попробуйте вместо этого использовать поля -1px.

— 27.06.2018 12:34

@MrLister Спасибо за предложение. Правда, вопрос был непонятен, что требуется.

— 27.06.2018 12:37

27.06.2018 12:32

Ответ принят как подходящий

Если это то, что вы хотите, я бы предпочел использовать таблицу вместо неупорядоченного списка. Однако вы можете получить желаемый эффект, используя стили outline вместо границ. Вам нужно будет добавить дополнительное поле в 1 пиксель к полям, чтобы эти контуры перекрывались, и вам понадобится немного больше настроек, чтобы выровнять вещи по левой стороне, но это должно сработать:

.main-permissions-box{
  border-left: 1px solid #555;
  width: 380px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.main-permissions-box li{
  list-style-type: none;
  padding:8px;
  margin: 1px;
  outline: 1px solid #555;
}
.main-permissions-box > ul> li{
  margin-left: 0;
}
.main-permissions-box > li:first-child{
}
.main-permissions-box ul ul li{
}
.main-permissions-box > ul{
  padding: 0;margin: 0;
}
.permission-text{
  padding-left: 25px;
}

<div class = "modal fade assign-menu-popup" role = "dialog" id = "assign_menu_modal">
  <div class = "modal-dialog" role = "document">
	<div class = "modal-content clearfix">
  	<div class = "main-permissions-box">
		<ul>
			<li class = "label-check">
        <input type = "checkbox" class = "checkBoxClass">
				<span class = "permission-text">Pre Sales</span>
			</li>
			<ul>
				<li class = "label-check">
				  <input type = "checkbox" class = "checkBoxClas">
				<span class = "permission-text">Schedule Consultation</span>
				</li>
				<ul>
					<li class = "label-check">
					  <input type = "checkbox" class = "checkBoxClass">
				<span class = "permission-text">Option One</span>
					</li>
					<li class = "label-check">
					  <input type = "checkbox" class = "checkBoxClass">
				<span class = "permission-text">Option Two</span>
					</li>
				</ul>
			</ul>
		</ul>
		<ul>
			<li class = "label-check">
				 <input type = "checkbox" class = "checkBoxClass">
         <span class = "permission-text">Schedule Consultation</span>
			</li>
		</ul>
		<ul>
			<li class = "label-check">
				  <input type = "checkbox" class = "checkBoxClass">
          <span class = "permission-text">Customer</span>
			</li>
		</ul>
		</div>
		<div class = "clearfix"></div>
	</div>
  </div>
</div>

Если подумать, добавление margin: -1px; к правилам .main-permissions-box li, как предлагает @MrLister, было бы лучшим решением.

— 27.06.2018 12:42

27.06.2018 12:33

На вопрос уже дан ответ, но отвечу, если кто-то хочет решить его с помощью border, а не с помощью outline или negative margins

Этот отрывок из приведенного ниже кода помогает с вложением любой, а не только с вложением в этом вопросе

ul > li{ border-bottom: 1px solid #555; }
ul > li:last-child{ border-bottom: none; }
ul > li:first-child{ border-top: 1px solid #555; }
ul ul > li:first-child{ border-top: none; }

Первые три правила обеспечивают правильную границу отдельной ul, а последние правила заботятся о вложенности

.main-permissions-box {
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
  border-left: 1px solid #555;
  width: 380px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.main-permissions-box li {
  list-style-type: none;
  padding: 8px;
}

.main-permissions-box ul ul li {
  border-left: 1px solid #555;
}

.main-permissions-box>ul {
  padding: 0;
  margin: 0;
}

.permission-text {
  padding-left: 25px;
}

.main-permissions-box ul>li {
  border-bottom: 1px solid #555;
}

.main-permissions-box ul>li:last-child {
  border-bottom: none;
}

.main-permissions-box ul>li:first-child {
  border-top: 1px solid #555;
}

.main-permissions-box ul ul>li:first-child {
  border-top: none;
}

<div class = "modal fade assign-menu-popup" role = "dialog" id = "assign_menu_modal">
  <div class = "modal-dialog" role = "document">
    <div class = "modal-content clearfix">
      <div class = "main-permissions-box">
        <ul>
          <li class = "label-check">
            <input type = "checkbox" class = "checkBoxClass">
            <span class = "permission-text">Pre Sales</span>
          </li>
          <ul>
            <li class = "label-check">
              <input type = "checkbox" class = "checkBoxClas">
              <span class = "permission-text">Schedule Consultation</span>
            </li>
            <ul>
              <li class = "label-check">
                <input type = "checkbox" class = "checkBoxClass">
                <span class = "permission-text">Option One</span>
              </li>
              <li class = "label-check">
                <input type = "checkbox" class = "checkBoxClass">
                <span class = "permission-text">Option Two</span>
              </li>
            </ul>
          </ul>
        </ul>
        <ul>
          <li class = "label-check">
            <input type = "checkbox" class = "checkBoxClass">
            <span class = "permission-text">Schedule Consultation</span>
          </li>
        </ul>
        <ul>
          <li class = "label-check">
            <input type = "checkbox" class = "checkBoxClass">
            <span class = "permission-text">Customer</span>
          </li>
        </ul>
      </div>
      <div class = "clearfix"></div>
    </div>
  </div>
</div>

27.06.2018 12:43

Другие вопросы по теме

Высота div не установлена должным образом после поворота содержащегося изображения

Как импортировать таблицу стилей из внешнего источника в React?

Как разместить заполнитель для даты и времени в html?

Не удалось загрузить @font_face на моем локальном хосте wamp?

Bootstrap NavBar Alignment (3 столбца с отзывчивым меню)

Ошибки при попытке создать эффект карусели

Контейнер в бутстрапе не работает

Управление размером шрифта внутри кнопки Apple Pay

Как исправить проект Laravel, который правильно отображается только на компьютерах, кроме моего?

После масштабирования borderImage показывает нежелательную прозрачную линию

Граница перекрывает дочерний элемент и дочерний элемент li

Ответы 3

Другие вопросы по теме

Похожие вопросы