html - <p> 不加分页符

标签 html css

我正在尝试创建一个网格图像，以显示穿过迷宫的路径。

除了网格系统没有分页符外，我一切正常。

例子

Example

期望的结果是这样的，行与行之间没有空格

Desired

这是源代码(注意:当我可以正确显示时，这将由应用程序自动生成)

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
}

.block {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, .2);
}

.red {
    background: red;
}

.white {
    background: white;
}

.green {
    background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="assets/style/form_styles.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
        <p>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </p>
    </body>
</html>

我已经尝试删除
并且我得到了直线。

我怎样才能让行真正成为行？

最佳答案

正如 Alon Eitan 指出的那样 <p>标签在这里可能不是最好的。如果您可以控制标记输出，我建议将换行更改为 <div>或类似的东西:

<div class="rowwrap">
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </div>

CSS:

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
}

.rowwrap {
  margin: 15px 0;
}

.rowwrap::after {
  content: '';
  display: block;
  clear: both;
}

.block {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, .2);
}

.red {
    background: red;
}

.white {
    background: white;
}

.green {
    background: green;
}

因为你所有的 block 都是 float 的，你还需要在下一行之前清除它们。我在 rowwrap 中添加了一个伪元素这样做。

摆弄工作示例:https://jsfiddle.net/zjedzyje/

关于html - <p> 不加分页符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44639020/

上一篇：javascript - 如何删除和附加元素 li？

下一篇：html - 为什么我的 flex grow 即使在定义的 flex 基础上也不能工作？

相关文章：

javascript - 使按钮的行为像复选框， knockout js

javascript替换关闭表格标签

javascript - 向输入添加样式，但仅在悬停和不活动时

html - Chrome 浏览器相关问题

jquery - 部分 View 更改之间未保留高度空间

javascript - 如何使用 getElementsByClassName 选择具有类的元素并单击它们？

javascript - HTML5 验证无效

css - 导航栏在某些页面上有粘性，但在其他页面上没有

jquery - 为什么我的下拉菜单链接不起作用

php - HTML 链接无法打开到窗口中

©2024 IT工具网  联系我们