Html CSS内联块滚动侧边方式_Html_Css

Html CSS内联块滚动侧边方式

html css

Html CSS内联块滚动侧边方式,html,css,Html,Css,我正试图使用CSS使这段代码在任何水平尺度下都能工作。就像，我一直都不成功我的代码已经准备好了，并提供了我想要的视觉效果，但是当我们缩放页面或以较小的水平尺寸使用它时，而不是添加水平滚动条，它会崩溃 <html> <head> <title>Gantt Display</title> <style> body {font-family:Verdana;font-size:10px;} .gantt {overflow-

我正试图使用CSS使这段代码在任何水平尺度下都能工作。就像，我一直都不成功

我的代码已经准备好了，并提供了我想要的视觉效果，但是当我们缩放页面或以较小的水平尺寸使用它时，而不是添加水平滚动条，它会崩溃

<html>
<head>
<title>Gantt Display</title>
<style>
    body {font-family:Verdana;font-size:10px;}
    .gantt {overflow-x:auto;overflow-y:hidden;background-color:#ffffff;font-size:0;}
    .gantt .head {display:block;}
    .gantt .head .text {height:32px;display:block;text-align:center;font-weight:bold;background-color:#eeeeee;vertical-align:middle;font-size:10px;}
    .gantt .head .month {display:inline-block;border-bottom:1px solid #eeeeee;}
    .gantt .head .day {display:inline-block;width:32px;height:32px;text-align:center;background-color:#f8f8f8;margin:0;padding:0;vertical-align:middle;font-size:10px;}
    .gantt .head .weekend {display:inline-block;width:32px;height:32px;text-align:center;background-color:#eeeeee;margin:0;padding:0;vertical-align:middle;font-size:10px;}
    .gantt .chart {display:block;}
    .gantt .chart .day {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#f8f8f8;margin:0;padding:0;}
    .gantt .chart .weekend {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#eeeeee;margin:0;padding:0;}
</style>
</head>
<body>
<div class="gantt">
    <div class="head">
        <div class="month">
            <div class="text">Setembro</div>
            <div class="day">19</div>
            <div class="day">20</div>
            <div class="day">21</div>
            <div class="day">22</div>
            <div class="day">23</div>
            <div class="weekend">S</div>
            <div class="weekend">D</div>
            <div class="day">26</div>
            <div class="day">27</div>
            <div class="day">28</div>
            <div class="day">29</div>
            <div class="day">30</div>
        </div>
        <div class="month">
            <div class="text">Outubro</div>
            <div class="weekend">S</div>
            <div class="weekend">D</div>
            <div class="day">3</div>
        </div>
    </div>
    <div class="chart">
        <div class="day"></div>
        <div class="day"></div>
        <div class="day"></div>
        <div class="day"></div>
        <div class="day"></div>
        <div class="weekend"></div>
        <div class="weekend"></div>
        <div class="day"></div>
        <div class="day"></div>
        <div class="day"></div>
        <div class="day"></div>
        <div class="day"></div>
        <div class="weekend"></div>
        <div class="weekend"></div>
        <div class="day"></div>
    </div>
</div>


甘特图显示
正文{字体系列：Verdana；字体大小：10px；}
.gantt{overflow-x:auto；overflow-y:hidden；背景色：#ffffffff；字体大小：0；}
.gantt.head{display:block；}
.gantt.head.text{height:32px；display:block；text align:center；font-weight:bold；background color:#eeeeee；vertical align:middle；font-size:10px；}
.gantt.head.month{显示：内联块；边框底部：1px实心#eeeeee；}
.gantt.head.day{显示：内联块；宽度：32px；高度：32px；文本对齐：中心；背景色：#F8；边距：0；填充：0；垂直对齐：中间；字体大小：10px；}
.gantt.head.weekend{显示：内联块；宽度：32px；高度：32px；文本对齐：中心；背景色：#eeeeee；边距：0；填充：0；垂直对齐：中间；字体大小：10px；}
.gantt.chart{display:block；}
.gantt.chart.day{显示：内联块；宽度：32px；文本对齐：中心；最小高度：256px；背景色：#F8；边距：0；填充：0；}
.gantt.chart.weekend{显示：内联块；宽度：32px；文本对齐：中心；最小高度：256px；背景色：#eeeeee；边距：0；填充：0；}
塞滕布洛
19
20
21
22
23
s
D
26
27
28
29
30
十月
s
D
3.

编辑：回答另外，我想了解，如果“边距”和“填充”都设置为零，为什么“垂直日栏”之间的空格会被设置为零
已编辑：显示问题的打印屏幕 这段代码几乎是我想要的，给我留下了一个“调整大小”的问题：
正确的页面（当页面宽度允许显示孔页面时）
变形页面（当…不时）
您所问的空格将回答您的问题。空格是完全正常的，因为
inline block
同时表示inline和block。内联元素将跟随文本行，代码中的一个空格就是呈现文档中的一个空格。空格占据字体大小的大小。为了解决整个问题，我建议：

.gantt { font-size: 0; } .gantt .day, .gantt .weekend { font-size: 1rem; }
通过这种方式，您可以删除方框之间的所有空格，并在工作日和周末重置字体大小。就这些
编辑：调整大小的问题调整大小的问题是容器比内容小。您有两个选择：
1）设置容器的宽度（32px*单元格总数+边距） 2）在容器上设置避免换行的属性（
空白：nowrap
）
因此，使用以下方法更改代码：

.gantt { white-space: nowrap; }

您所问的空格将回答您的问题。空格是完全正常的，因为
inline block
同时表示inline和block。内联元素将跟随文本行，代码中的一个空格就是呈现文档中的一个空格。空格占据字体大小的大小。为了解决整个问题，我建议：

.gantt { font-size: 0; } .gantt .day, .gantt .weekend { font-size: 1rem; }
通过这种方式，您可以删除方框之间的所有空格，并在工作日和周末重置字体大小。就这些
编辑：调整大小的问题调整大小的问题是容器比内容小。您有两个选择：
1）设置容器的宽度（32px*单元格总数+边距） 2）在容器上设置避免换行的属性（
空白：nowrap
）
因此，使用以下方法更改代码：

.gantt { white-space: nowrap; }

竖条之间的空格是因为您将这些div视为
display:inline block。标记中元素之间的任何空间都将被视为标记中文本之间的空间。您不需要指定display:block到。它已经有了块级格式。竖条之间的空格是因为您正在使用display:inline block。标记中元素之间的任何空间都将被视为标记中文本之间的空间。您不需要指定display:block到。它已经有了块级格式。我知道，它实际上已经解决了，但我使用了“10px”而不是“1rem”-因为它太大了。虽然换行没有解决“内联块”部分的任何线索？我需要正确地并排对齐，但是如果我有太多的列（天），它就会崩溃（见我添加的图片）@SammuelMiranda使用两种断线解决方案编辑。你是加利西亚人吗？我也是：DNo，不是加利西亚·马科斯，巴西人。上面你编辑说“你有两个选择”，但只放了一个。。。RSOK！巴西人的葡萄牙语与过去的加利西亚语相同。当我看到你的截图时，我看到的是setembro 和outubro ，这与我的语言是一样的。然而，这个问题已经解决了。期待很快与您见面！我知道，它实际上解决了，但我用“10px”代替了“1rem”——因为它太大了。虽然换行没有解决“内联块”部分的任何线索？我需要正确地并排对齐，但是如果我有太多的列（天），它就会崩溃（见我添加的图片）@SammuelMiranda使用两种断线解决方案编辑。你是加利西亚人吗？我也是：DNo，不是加利西亚·马科斯，巴西人。上面你编辑说“你有两个选择”，但只放了一个。。。RSOK！巴西人的葡萄牙语与过去的加利西亚语相同。当我看到你的截图时，我看到了setembro 和ou