В некоторых тегах hr есть пробелы, а в других нет

Question

У меня есть ручка , которая в основном является приложением todo .Элементы todo на самом деле являются li элементами, которые имеют text , button и hr.У некоторых из них hr с пробелами внутри , а у некоторых нет.

Изображение:

HTML:

const j = $;

j(() => {
  let validify = txt => {
    if (txt.length > 0) {
      j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
    }

    j('.td-btn').on('mouseenter', function() {
      console.log('added');
      j(this)
        .parent()
        .addClass('del');
      console.log(j(this).parent().attr('class'))
    }).on('mouseleave', function() {
      console.log('removed')
      j(this)
        .parent()
        .removeClass('del');
    }).on('click', function() {
      j(this).parent().css('display', 'none');
    });

    j('#addtd').val('');
  }
  validify('');

  j('#btn').on('click', () => {
    validify(j('#addtd').val());
  });
});

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  box-sizing: border-box;
  font-family: Lato;
}

body {
  margin: 0;
  padding: 3vh 7vw;
  background: #004D40;
}

#in-ctn {
  position: fixed;
  width: 86vw;
  height: 16vh;
  background: #388E3C;
  box-shadow: 0 6px 9px #272727;
  z-index: 2;
}

#btn {
  position: absolute;
  border-radius: 100%;
  outline: none;
  border: none;
  right: 7vh;
  top: 3vh;
  width: 10vh;
  height: 10vh;
  font: 500 8vh arial;
  display: inline-block;
  transition: 0.25s all;
  background: #CDDC39;
}

#btn:hover {
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
  transform: scale(1.1);
}

#btn:active {
  transform: translateY(4px);
}

#addtd {
  position: absolute;
  outline: none;
  border: none;
  background: rgba(255, 255, 255, 0.33);
  width: 50vw;
  height: 6vh;
  top: 5vh;
  left: 5vw;
  font: 500 14pt Lato;
  padding: 0 10px;
}

#addtd::placeholder {
  color: #FFF;
}

#ctn {
  position: absolute;
  top: 27vh;
  width: 86vw;
  background: #388E3C;
  box-shadow: 0 6px 9px #272727;
  padding: 3vh 5vw;
  z-index: 1;
}

li.td {
  font: 500 20pt Lato;
  list-style: none;
  color: #FFF;
}

button.td-btn {
  float: right;
  outline: none;
  border: none;
  background: #E53935;
  height: 20px;
  position: relative;
  top: 25px;
  color: #FFF;
}

hr {
  border: 7px solid #9E9D24;
  padding: 0;
}

.del {
  color: #CDDC39 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div id='main'>
  <div id='in-ctn'>
    <button id='btn'>+</button>
    <input type='text' id='addtd' placeholder='Enter a new Todo' />
  </div>
  <div id='ctn'>
    <li class='td'>
      Code a Todo App
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
    <li class='td'>
      Style the Elements
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
    <li class='td'>
      Debug some problems
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
    <li class='td'>
      Go for a walk
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
  </div>
</div>

Может кто-нибудь объяснить мне, почему это так?

Answer 1

Вы редактировали свою ручку, чтобы исправить проблему? При предварительном просмотре пера все теги <hr> отображаются без пустого пространства внутри.

Единственное предложение, которое у меня есть, это то, что в HTML <hr> не нужно явно закрываться, если только вы не используете XHTML, тогда вам нужно правильно закрыть тег <hr />. Поскольку вы просто пишете HTML, я бы пошел с <hr>.

Answer 2

Это происходит из-за рендеринга субпикселя CSS. Когда вы увеличиваете или уменьшаете масштаб браузера, измененные элементы будут иметь значения пикселей выше 5,75 пикселей и т. Д. Поставщик решает, как с этим справиться.

В вашем случае самое простое решение, по крайней мере, в Chrome, состоит в том, чтобы отменить радиус границы до 0px, вместо этого установить высоту hr, чтобы удвоить границу и придать ей цвет фона:

border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;

Answer 3

Похоже, что эта проблема связана с браузером, так как она отлично работает для большинства людей. Возможно, ваш браузер имеет стиль по умолчанию для элементов hr. Однако в настоящее время плохой практикой является использование горизонтальной линии для презентационных терминов. Источник

С вашим li элементом все будет в порядке. Если вы хотите расположить границу ниже позиции по умолчанию, вы можете использовать padding-bottom для элемента li. Ваша HTML-структура также выглядит намного более понятной.

Например, изменение стиля вашего селектора CSS li.td на следующее может помочь:

li.td {
  font: 500 20pt Lato;
  list-style: none;
  color: #CDDC39;
  border-bottom: 10px solid #9E9D24;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

Если вам действительно нужно использовать элемент hr, вы можете попытаться удалить все поля по умолчанию, поскольку некоторые браузеры по умолчанию добавляют поля. Для этого добавьте следующий элемент к элементу:

margin: 0

, что приведет к

hr {
  border: 7px solid #9E9D24;
  padding: 0;
  margin: 0;
}