浮动：

Question

enter image description here

为什么两个 glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glEnable(GL_BLEND); 标签之间有一个空格？当我设置 <hr> 标签的宽度时，它不起作用。我做了 <hr>，但是两个 49% 标签之间仍然有一个空格。如何从 <hr> 标签中删除空格？

这是 HTML 和 CSS 代码：

<hr>

*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{   
    display: inline-block;width: 49%;
    background-color: #f34601;height: 2px;border: 0;
}
#right
{
    display: inline-block;width: 49%;
    background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}

Answer 1

您可以使用带有渐变背景的单个 hr。

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #181818;
  color: white;
}

a {
  text-decoration: none;
}

h1 {
  text-align: center;
  color: #3ea6ff;
}

.home {
  font-size: 3em;
  background-color: #202020;
}

#night {
  color: #f34601;
}

#mare {
  color: #3ea6ff;
}

hr {
  display: inline-block;
  background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%);
  height: 2px;
  width: 100%;
  border: 0;
}

<div class="home logo">
  <h1 id="mare">
    <span id="night">Night</span>mare</h1>
</div>
<hr>

Answer 2

检查代码。这真的是一个更好的答案 (imo) occam's razor

*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{   
    display: inline-block;width: 49%;
    background-color: #f34601;height: 2px;border: 0;
}
#right
{
    display: inline-block;width: 49%;
    background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}

<!DOCTYPE html>
<html>
<head>
    <title>Nightmare</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
    <div class="home logo">
        <h1 id="mare">
            <span id="night">Night</span>mare</h1>
    </div>
    <hr id="left"><hr id="right">
    
            <h1> OR YOU CAN DO THIS</h1>
    <hr id="left"><!--
 --><hr id="right">
            
</body>
</html>

Answer 3

浮动：

在两个 float:left; 上使用 hr 似乎有效。

弹性：

我不建议这样做。我要做的是将 2 个 hr 包装成一个 div 并在其上添加 display: flex;。在孩子们中，我会添加 flex-grow:1;

如果我没记错的话，它应该增加 2 个 hr 以均匀地占据 div 中的所有空间。它还可以更好地处理页面的其余部分，而不是使用 float，后者有时会搞砸一切（根据我自己的经验）。

Answer 4

<hr id="left">
<br>
<hr id="right">

你可以在hr之间加一个br a br 表示休息。检查此链接以查看更多信息 https://www.w3schools.com/tags/tag_br.asp

如何删除两个hr标签之间的空格？

4 个答案:

浮动：

弹性：