问如何解决在不同行上编写HTML所带来的不必要的影响？
EN

Stack Overflow用户

提问于 2021-12-03 03:15:26

回答 1查看 42关注 0票数 1

在下面的图像中，您可以看到相同的HTML块。首先，代码写得很干净，易于维护。在第二行中，它是一行(编辑器完成了它的包装)，它很难看，很难维护。但是，最初的结果并不完美。第二是预期结果。作为相同的CSS，是否有可能进行某种程度的修正，从而使结果在HTML 1中是准确的？也许有一些额外的CSS；我不知道多少CSS，请原谅我的问题是否愚蠢。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .crate {
            margin-right: 3px;
            margin-bottom: -2px;
            width: 100px;
            height: 60px;
            border: 1px solid silver;
        }
    </style>
</head>

<body>
    <h3>Exp_Mockup</h3>
    <hr />
    <!-- HTML 1 (is not perfect, pretty html) -->
    <div>
        <canvas id="canvas-title" class="crate"></canvas>
    </div>
    <div>
        <canvas id="canvas-index-header" class="crate"></canvas>
        <canvas id="header-0" class="crate"></canvas>
        <canvas id="header-1" class="crate"></canvas>
        <canvas id="header-2" class="crate"></canvas>
        <canvas id="header-3" class="crate"></canvas>
    </div>
    <div>
        <canvas id="canvas-index-track" class="crate"></canvas>
        <canvas id="track-0" class="crate"></canvas>
        <canvas id="track-1" class="crate"></canvas>
        <canvas id="track-2" class="crate"></canvas>
        <canvas id="track-3" class="crate"></canvas>
    </div>
    <div>
        <canvas id="canvas-footer" class="crate"></canvas>
    </div>
    <hr />
    
    <!-- HTML 2 (single line, perfect, ugly marckup) -->
    <div><canvas id="canvas-title" class="crate"></canvas></div>
    <div><canvas id="canvas-index-header" class="crate"></canvas><canvas id="header-0" class="crate"></canvas><canvas
            id="header-1" class="crate"></canvas><canvas id="header-2" class="crate"></canvas><canvas id="header-3"
            class="crate"></canvas></div>
    <div><canvas id="canvas-index-track" class="crate"></canvas><canvas id="track-0" class="crate"></canvas><canvas
            id="track-1" class="crate"></canvas><canvas id="track-2" class="crate"></canvas><canvas id="track-3"
            class="crate"></canvas></div>
    <div><canvas id="canvas-footer" class="crate"></canvas></div>
</body>

</html>

我期望得到相同的结果，而不需要不同的CSS。这是模型，其余的都在代码中工作。

html

css

回答 1

Stack Overflow用户

发布于 2021-12-03 06:57:32

CSS的谜团。如果目标是HTML-1，那么：

.crate {
    margin-right: 2px;
    margin-bottom: 2px;
    width: 100px;
    height: 60px;
    border: 1px solid silver;
}
 
.single-line {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

然后,

<div class="single-line">
    <canvas id="canvas-title" class="crate"></canvas>
</div>
<div class="single-line">
    <canvas id="canvas-index-header" class="crate"></canvas>
    <canvas id="header-0" class="crate"></canvas>
    <canvas id="header-1" class="crate"></canvas>
    <canvas id="header-2" class="crate"></canvas>
    <canvas id="header-3" class="crate"></canvas>
</div>
<div class="single-line">
    <canvas id="canvas-index-track" class="crate"></canvas>
    <canvas id="track-0" class="crate"></canvas>
    <canvas id="track-1" class="crate"></canvas>
    <canvas id="track-2" class="crate"></canvas>
    <canvas id="track-3" class="crate"></canvas>
</div>
<div class="single-line">
    <canvas id="canvas-footer" class="crate"></canvas>
</div>

是邪恶的:_)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70209098

复制

相似问题

问如何解决在不同行上编写HTML所带来的不必要的影响？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解决在不同行上编写HTML所带来的不必要的影响？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解决在不同行上编写HTML所带来的不必要的影响？
EN