Question

我有一个pen，它基本上是一个 todo app 。 todo项目实际上是li个元素，其中文字，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元素的默认样式。然而，现在使用水平线作为表示术语是不好的做法。 Source

在border-bottom元素上使用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;
}

Answer 2

您是否编辑过笔来解决问题？查看笔预览时，所有<hr>标记都会在内部没有空格的情况下呈现。

我唯一的建议是，在HTML <hr>中不需要明确关闭，除非您使用XHTML，否则您需要正确关闭标记<hr />。由于您只是编写HTML，我会使用<hr>。

Answer 3

由于CSS子像素渲染，这种情况正在发生。放大/缩小浏览器时，重新调整的元素将保留像5.75像素等像素值。供应商决定如何处理。

在你的情况下，最简单的修复，至少在Chrome中，是将边框半径取消为0px，而是将hr的高度设置为使边框加倍并为其指定背景颜色：

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

一些hr标签内部有空隙，而其他标签没有

3 个答案: