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

问题描述

作为项目的一部分，我制作了一个倒计时时钟。我已经让后端程序按需要运行（使用 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 之后以制作表格，但上述代码的结果如下：

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

标签： htmlcss

像div,hr也默认display: block;是让每个hr出现在新行上。

您需要添加新样式。

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

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

问题描述

解决方案

推荐阅读