Question

我正在将倒数时钟作为项目的一部分。我已经获得了可以根据需要运行的后端程序（使用JS）。但是，我对前端编程不太自信，因此在使用<hr>标签在正确的位置显示为垂直线时，在处理CSS和HTML时遇到了一些困难。

这是HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OPMS2 Countdown</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src = "main.js"></script>
</head>
<h1>Countdown Clock</h1>
<div id="clockdiv">
    <div>
        <span class="days" id="day"></span>
        <div class="smalltext">Days</div>
    </div>
    <hr width="1" size="100">
    <div>
        <span class="hours" id="hour"></span>
        <div class="smalltext">Hours</div>
    </div>
    <hr width="1" size="100">
    <div>
        <span class="minutes" id="minute"></span>
        <div class="smalltext">Minutes</div>
    </div>
    <hr width="1" size="100">
    <div>
        <span class="seconds" id="second"></span>
        <div class="smalltext">Seconds</div>
    </div>
    <hr width="1" size="100">
</div>

<p id="demo"></p>

</body>
</html>

这是相关的CSS：

body{
    text-align: center;
    background: #000000;
    font-family: sans-serif;
    font-weight: 100;
    background-image: url("logo.png");
}
p{
    text-align: center;
    font-size: 60px;
}
h1{
    color: #ffffff;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}
#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}
#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #000000;
    display: inline-block;
}
#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #000000;
    display: inline-block;
}
smalltext{
    padding-top: 5px;
    font-size: 16px;
}
hr{

}

很明显，<hr>标记位于每个div之后才能构成表格，但上述代码的结果如下：

我只希望线条移到每个部分的侧面。任何帮助将不胜感激。谢谢！

Answer 1

像div，hr一样，默认情况下也设为display: block;，这会使每个hr出现在新行上。

您要添加新样式。

hr {
 display: inline-block;
 vertical-align: middle;
}

Answer 2

我认为您的第一个错误是使用hr。 h毕竟是水平的。

您真正拥有的是边界。利用这个优势。摆脱hr并使用边框样式：border-right: double 4px white;。它使您的html更加整洁，并删除了您在语义上没有使用的元素。如果您通过媒体查询调整布局，这也使您的生活更加轻松。

body{
    text-align: center;
    background: #000000;
    font-family: sans-serif;
    font-weight: 100;
    background-image: url("logo.png");
}
p{
    text-align: center;
    font-size: 60px;
}
h1{
    color: #ffffff;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}
#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}
#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #000000;
    display: inline-block;
    /*Border Styling Here*/
    border-right: double 4px white;
}
#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #000000;
    display: inline-block;
}
smalltext{
    padding-top: 5px;
    font-size: 16px;
}

<h1>Countdown Clock</h1>
<div id="clockdiv">
    <div>
        <span class="days" id="day">1</span>
        <div class="smalltext">Days</div>
    </div>

    <div>
        <span class="hours" id="hour">2</span>
        <div class="smalltext">Hours</div>
    </div>

    <div>
        <span class="minutes" id="minute">3</span>
        <div class="smalltext">Minutes</div>
    </div>

    <div>
        <span class="seconds" id="second">4</span>
        <div class="smalltext">Seconds</div>
    </div>

</div>

<p id="demo"></p>

如何使用CSS和HTML水平移动以创建表

2 个答案: