首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使多个Materialize列在一行中,并且它们与屏幕边缘之间的间距相同?

要使多个Materialize列在一行中,并且它们与屏幕边缘之间的间距相同,可以使用Materialize的栅格系统和CSS样式来实现。

首先,使用Materialize的栅格系统将多个列放置在一行中。栅格系统使用了12个列的概念,可以将页面水平划分为12个等宽的列。你可以根据需要将列分配给不同的元素。

例如,如果你想要在一行中放置3个等宽的列,可以使用以下代码:

代码语言:txt
复制
<div class="row">
  <div class="col s4">Column 1</div>
  <div class="col s4">Column 2</div>
  <div class="col s4">Column 3</div>
</div>

在上面的代码中,我们使用了row类来创建一个行,并在行内使用了三个col s4类来创建三个等宽的列。每个列都占据了屏幕宽度的1/3。

接下来,为了使列与屏幕边缘之间的间距相同,你可以使用自定义的CSS样式来设置列的外边距。你可以为列添加一个自定义的类,并在CSS中设置该类的外边距。

例如,你可以在HTML中添加一个自定义的类名为custom-margin

代码语言:txt
复制
<div class="row">
  <div class="col s4 custom-margin">Column 1</div>
  <div class="col s4 custom-margin">Column 2</div>
  <div class="col s4 custom-margin">Column 3</div>
</div>

然后,在CSS中设置该类的外边距:

代码语言:txt
复制
.custom-margin {
  margin: 0 10px; /* 设置左右外边距为10像素 */
}

通过设置左右外边距为相同的值,你可以确保列与屏幕边缘之间的间距相同。在上面的例子中,我们将左右外边距都设置为10像素。

这样,你就可以将多个Materialize列放置在一行中,并且它们与屏幕边缘之间的间距相同了。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法提供具体的链接。但你可以通过访问腾讯云的官方网站,搜索相关的产品和服务,以获取更多关于腾讯云的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS进阶11-表格table

第三条规则使“totals”列变为蓝色,最后两条规则通过使用固定布局算法fixed layout algorithm显示如何使列成为固定大小。...否则,该列的宽度有第一行中'width'属性值不是'auto'的单元格确定。如果该单元格跨越多个列,则宽度分散到各个列。...表边框和单元格边缘之间的距离是表的内边距padding ,加上相应的边框间距border spacing distance。...例如,在右侧,距离是padding-right + horizontal border-spacing。 表格边框与表格边框之间的距离是该表格的边框填充以及相关的边框间距。...此外,如果一行中的所有单元格都具有“hide”值并且没有可见内容,则该行的高度为零,并且该行仅一侧有垂直边界间距。

6.6K30

CSS Flexbox 布局指南

;在 rtl 中从右到左 row-reverse:在 ltr 中从右到左;在 rtl 中从左到右 column:与 row 相同,但从上到下 column-reverse:与 row-reverse 相同...请注意,视觉上这些空间并不相等,因为所有项目在两侧都有相等的空间。第一个项目在容器边缘有一个单位的空间,但下一个项目之间有两个单位的空间,因为下一个项目有自己的间距。...space-evenly:项目分布,使得任何两个项目之间的间距(以及到边缘的空间)相等。 请注意,这些值的浏览器支持是有差异的。...center:项目在横轴上居中对齐 baseline:项目对齐,使它们的基线对齐 safe 和 unsafe 修饰符关键字可以与所有这些关键字结合使用(尽管请注意浏览器支持),并帮助你防止对齐元素使内容变得不可访问...gap, row-gap, column-gap gap 属性明确控制弹性项目之间的空间。它仅在项目之间应用间距,而不是在外边缘。

22510
  • 使用这种技巧,可以大大地提高前端布局效率

    在CSS 中使用wrapper可能有多种方式,这些方式中,有些会带来一些问题。 在本文中,将介绍 CSS中 的 wrapper 布局,它们如何工作,如何使用它们以及何时不使用它们。...对于小屏幕,这似乎可以。 但是,对于大屏幕,这是非常烦人的。 对设计元素进行分组可以更好地增加间距。 在没有wrapper的情况下,将设计元素划分为列是不容易完成的。...,并且需要在它们之间添加间距时,它可能会令人困惑。...important; } 这样,wrapper 的 CSS保持原样,并且使用附加的 CSS 类添加了间距。 现在,你可能会问,为什么可以在一个页面上添加多个wrapper?...全屏中的 Wrapper 在某些情况下,如果某个部分的背景视口宽度为100%,并且其中包含wrapper`,则可能会出现这种情况。 与上一个示例中介绍的类似。

    3.9K20

    一篇文章读懂UI按钮设计细节与规范

    如果你有一组按钮,那么它们之间的安全空间如下图表示,务必不要重叠。 ? 合适的按钮大小 网页或者移动端设计中的按钮都应具有正确的最小尺寸。如果你的按钮太小,用户会很难点击或者使用它们。...圆角按钮 圆角按钮被认为比锋利边缘的按钮更为友好和正面。但是,与此同时,这种做法使围绕它们的内容设计变得更加困难。如果你在按钮上方保留了对齐文本,则圆角越圆,在该文本在视觉上将会越小。...然后,将图标放置在较小的形状中。 如果是人字形图标,那么最高使其与文本高度相同,并且您还可以根据字体的宽度检查线宽。匹配越紧密,最终结果越好。...边缘平衡 如果你使用的是圆角按钮,请记住将正确的圆角比率与屏幕上的其它元素对齐。在所有的情况下使用一种设置会造成视觉边际的不平衡。 ? 对角线间距与左侧和底部的对角线间距相同。...这样可以更好更快的处理外部边缘。 ? 对角线间距大于(左侧)间距,小于(右侧)间距。这会使边缘突出太多,使注意力从按钮本身上移开。如上图两种都是错误的例子。

    3.8K30

    Android之布局详解

    指定布局右边与子布局的间距 android:paddingBottom 指定布局下边与子布局的间距 android:paddingStart 指定布局左边与子布局的间距与android:paddingLeft...相同 android:paddingEnd 指定布局右边与子布局的间距与android:paddingRight相同 android:fadingEdgeLength 设置边框渐变的长度 android...如何确定行数与列数 ①如果我们直接往TableLayout中添加组件的话,那么这个组件将占满一行!!! ②如果我们想一行上有多个组件的话,就要添加一个TableRow的容器,把组件都丢到里面!...流程:在TableLayout中设置了四个按钮,接着在最外层的TableLayout中添加以下属性: android:stretchColumns = “1” 设置第二列为可拉伸列,让该列填满这一行所有的剩余空间...android:columnOrderPreserved 使列边界显示的顺序和列索引的顺序相同,默认是true android:rowOrderPreserved 使行边界显示的顺序和行索引的顺序相同,

    2K10

    译|CSS中的间距,前端开发中各种设置间距的优点缺点及实例

    如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此。当对多个设计元素进行分组时,用户可以根据它们之间的空间大小来决定它们之间的关系。...例如,在上一个示例中,我添加了 margin-bottom:1rem 在两个堆叠的元素之间添加垂直间距。...网格中,可以使用 grid-gap 属性轻松在列和行之间添加间距。....c-user { margin-left: 8px; } 网格系统中的间距:Flexbox 网格是间隔最常用的情况之一。考虑以下示例: ? 间距应在列和行之间。...那是一个 ,内联样式宽度:16px,它唯一的作用是在左边缘和包装器之间增加一个空白空间。 引述这本React游戏手册中的内容。

    12.1K10

    图文学习前端Flex布局

    ,指定伸缩项是否换行以及它们换行到多行或多列的方向。...image center 弹性物品被打包在线的中间。flex项目在直线上放置冲洗彼此对齐线的中心,与等量的main-start边缘之间的空白行和第一项之间的线,主要目的的边缘线,最后一项。...否则,main-start保证的第一flex项目线的边缘放置充裕的main-start边缘线,最后一个flex项的主要目的利润边缘线放置充裕的主要目的边缘线,和其余的flex项目的分布之间的间距与任何两个相邻物品是一样的...image space-around 弹性项目均匀地分布在线中,在两端有一半大小的空间。如果剩余的自由空间是负的,或者一行上只有一个伸缩项,这个值与' center '相同。...否则,行上的伸缩项的分布使行上任意两个相邻伸缩项之间的间距相同,并且第一个/最后一个伸缩项与伸缩容器边缘之间的间距为伸缩项之间间距的一半。

    1.5K10

    移动端UI界面设计之APP字体排版原则| 萧蕊冰

    留足空间 与普遍观点恰好相反,字体并非屏幕上弯弯曲曲的线条排列;它主要在于周围和相互间的空间。 字母本身对字体的影响,与构成它的空间相比,要小得多。...要在移动端创造最佳易读性,尤其要注意这些特殊层次,这些格式塔式的词语、行、段落的文字组合,在自然光环境下同样至关重要。 2. 行宽与行高 行宽是一行文字的长度。...如果再加入斜体、大小写和一大堆其他字体细节,还会有更大的差异。 在桌面端浏览器中,65个字符很难触及边缘,但在移动设备上,65个字符(如果至少大到看得清)会超出浏览器的边界。...鉴于这个理想行宽已经经历了数个世纪的考验,它在移动端字体上也运转良好。 3. 宽松行距、紧凑行距 行距是行之间的空间,行距太紧凑,会让视线难以从行尾扫视到下一行首。...固有字距是两个字母相互组合时的距离,使它们的间距与其他字母间距在视觉上统一。创作字体时,就纳入了固有字距的考量,这个过程可能要花上数月。

    2K30

    文字如何实现完美UI?文本排版设计告诉你

    此外,在设计手机端字体大小时,需要留意设计字体大小要比常规、使用在桌面端的略大一些。 ? 2. 间距 1) 行间距 行间距是一排文字和另一排文字之间的空间。...另外, 如果文本的长度越短,那么它对行间距宽度的要求也会降低。 ? 2) 字间距 字间距是两个文字之间的间距。这是手机排版中的一个很小的因素,但值得关注。...你可能会认为,在一个段落里,字距调整可能不是一个必要问题。但如果您足够细心,您可能会注意到,这通常出现在英文文本中,大写字母与小写字母之间的空间和两个小写字母之间的空间不尽相同。...左中右三种方式都可以保留边距,而两端对齐在左右两侧都没有边距。此外,两端对齐文本会导致不一致的字间距,最坏的情况还会导致一行中的几个单词紧紧凑在一起。对于文本主体而言,两端对齐是不明智的选择。...左侧对齐是其余3种对齐方式里的最佳选择。它可能产生右边缘边距,留下空间,左对齐可以使用户的目光从一行文字连贯到下一行文字,提供一个整齐的初始点。 ?

    2.6K70

    【CSS】1287- 一行 CSS 实现 10 种强大的布局

    这是营销网站的常见布局,例如,可能有一行 3 个项目,通常带有图像、标题,然后是一些描述产品某些功能的文本。在移动设备上,我们希望它们能够很好地堆叠,并随着我们增加屏幕尺寸而扩展。...第一个和第二个以空格分隔的列表之间的斜线是行和列之间的分隔符。...这些子元素的基本最小值为 150px ,最大值为 1fr ,这意味着在较小的屏幕上,它们将占据整个 1fr 宽度,当它们达到 150px 宽度时,它们将开始流到同一条线上。...对于这些卡片,它们被放置在 Flexbox 显示模式中,使用 flex-direction: column 将方向设置为 column。 这会将标题、描述和图像块放在父卡片内的垂直列中。...然后,应用 justify-content: space-between 将第一个(标题)和最后一个(图像块)元素锚定到 flexbox 的边缘,并且它们之间的描述性文本以相等的间距放置到每个端点。

    4.7K20

    深入Java Swing用户界面组件布局管理器:网格布局+面板+边界布局

    与流布局不同,边界布局会扩大所有组件的尺寸以便填充可用空间(在流布局中每个组件都有首选的大小)。 与流布局一样,可以通过在BorderLayout的构造器中提供间距参数来指定间距。...面板如同界面元素的(较小的)容器,并且在布局管理器的控制之下,它们自己能够排列在一个更大的面板中。例如,可以把一个面板放在南部区域用于容纳按钮,而另一个面板放在中部用于显示文本。...添加组件,从第一行的第一列开始,然后是第一行的第二列,以此类推。...当然,极少有应用程序具有与计算器的外表一样的布局。在实际应用中,小的网格(通常仅仅一行或者一列)在组织窗口的布局区域时比较有用。...例如,如果想有一行相同尺寸的按钮,那么就可以把按钮放置在一个面板里面,这个面板使用只有单行的网格布局进行管理。

    3.7K30

    CSS进阶05-行内格式上下文IFC

    如果它们对齐 top 或 bottom,它们必须对齐,以便使行盒高度最小化。如果这些盒足够高,则有多种解决方案并且CSS2.2没有规定此行盒的基线的位置(即,strut的位置,参见下文)。...值0% 意味着与 baseline 相同。 把盒提升(正值)或降低(负值)指定距离。值0cm 意味着与 baseline 相同。 下面的值使元素相对于行盒对齐。...当在水平方向上几个行内级盒不能完全被单个行盒包含时,它们会被分配到两个或者多个垂直堆叠的行盒中。因此,一个段落就是多个行盒的垂直堆叠。行盒的堆叠没有垂直间距(除非有特别声明)并且从不重叠。 3....行盒的宽度 一般来说,行盒的左边缘紧贴其包含块的左边缘,其右边缘紧贴包含块的右边缘。然而,浮动盒可能被置于包含块和行盒边缘之间。...当一行中的行内级盒的总宽度小于包含它们的包含块的时候,它们在行里的水平分布取决于 text-align 属性。

    1.7K30

    深入学习下 CSS 间距相关的知识

    当对多个元素进行分组设计时,用户可以通过它们之间的空间量来决定它们之间的关系。如果没有间距,用户将很难分清页面上哪些项目内容相关,哪些项目内容不相关。...因此,在本文中,我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。 现在,让我们开始吧。 间距类型 CSS 中的间距有两种类型,一种在元素外,另一种在元素内。...CSS 网格中,可以使用 grid-gap 属性轻松地在列和行之间添加间距。...editors=0100 网格系统中的间距 - Flexbox 网格是间距最常用的情况之一,考虑以下示例: 间距应该在列和行之间,考虑以下 HTML 标记: ...以下是我想到的一些问题: 间隔组件如何在父组件中获取其宽度或高度?它将如何在水平和垂直布局中工作?例如:堆栈内的间隔符与添加左侧空间的间隔符。

    13.5K40

    重学前端之BFC、IFC、FFC、GFC

    作用及应用场景:解决外边距塌陷问题:在普通的文档流中,当两个相邻的块级元素上下排列,并且都设置了外边距时,它们之间的垂直外边距会发生合并(塌陷),取两者外边距中的较大值。...在 IFC 中,内联元素按照水平方向依次排列,当一行排不下时会进行换行处理,并且在垂直方向上,它们的对齐方式遵循一定的规则,比如基线对齐、顶部对齐、中部对齐等。...布局规则:内联元素在水平方向上从左到右依次排列(对于从右到左的文字排版语言则是从右到左排列),多个内联元素之间会根据 white-space(空白符处理方式)、word-spacing(单词间距)、letter-spacing...(字母间距)等属性来调整它们之间的间距。...-文本排版:在处理一段包含多个内联元素(比如不同样式的文字、链接等混合在一起)的文本内容时,IFC 规则决定了它们如何在一行内排列以及垂直方向上的对齐情况。

    18810

    【Java 进阶篇】HTML 与 CSS 结合详解

    CSS 类 CSS类是一种用于在多个元素之间共享样式规则的方法。通过定义类,可以将相同的样式应用于多个元素。...ID 选择器 ID选择器用于选择页面中的唯一元素。与类不同,每个ID在文档中只能出现一次。...这些属性可以帮助你调整元素之间的间距以及元素内部的空白。 z-index属性:用于控制元素的堆叠顺序。当多个元素重叠时,z-index值较大的元素将显示在较小的元素上方。 8....伪元素以::开头,例如::before和::after,它们允许你在元素的内容前后插入内容。 9. 响应式设计 响应式设计是一种使网页能够适应不同屏幕尺寸和设备的技术。...Flexbox适用于一维布局,如排列元素在一行或一列中的情况,而Grid布局适用于二维布局,允许你创建行和列的复杂网格结构。这些布局模型提供了更强大的布局控制和灵活性。

    32020

    grid布局方式的使用「建议收藏」

    ; 行与行之间的间距*/ /* grid-column-gap:20px; 列与列之间的间距 */ /* grid-gap:20px 20px...Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。 Flex 布局是轴线布局,只能指定”项目”针对轴线的位置,可以看作是一维布局。...(行间距),grid-column-gap属性设置列与列的间隔(列间距)。...space-between – 项目与项目的间隔相等,项目与容器边框之间没有间隔。 space-evenly – 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。...它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。

    2K10

    15 个优秀的响应式 CSS 框架

    Bootstrap 最受欢迎 Bootstrap 是最流行的 HTML、CSS 和 JS 框架,用于在 Web 上开发响应式、移动优先项目。Bootstrap 使前端开发更快、更轻松。...在 Bootstrap 5 中做了一些重大更改,例如随意使用 jQuery 并添加了 RTL 支持,再加上现成的组件和工具类,使 Bootstrap 成为 Web 开发人员的最佳选择之一。...它具有出色的 CSS 库,并且与大多数流行的 JavaScript 框架(如 jQuery、Angular、React 和。Vue.js)兼容。其核心库是完全免费使用的。...Materialize ? materialize Materialize 是基于 Material Design 的现代响应式前端框架。...Skeleton 中的网格是一个 12 列的流体网格,最大宽度为 960px,随着浏览器或设备的缩小而缩小。可以用一行 CSS 更改最大宽度,并且所有列的大小都会相应进行调整。

    11.4K10

    使用 CSS Grid 的响应式网页设计:消除媒体查询过载

    前言你是否厌倦了在实现响应式网站时需要管理多个媒体查询?说再见复杂的代码,拥抱更简单的解决方案吧:CSS Grid。...在这篇文章中,我们将踏上一场激动人心的 CSS Grid 之旅,发现它如何消除了对复杂媒体查询的需求,使你能够轻松创建响应式网站。所以,让我们深入研究,彻底改变你对网页设计的方式吧!...grid-gap 属性在网格项之间添加了间距,使设计更具视觉吸引力。Grid 默认具备响应性吗? CSS Grid 不是默认具备响应性的。...让我们通过简单的示例来探讨它们:1、Repeat()CSS Grid 中的 repeat() 函数允许你定义网格列或行的模式。它简化了重复某种大小或模式的过程,而无需逐个列出每个列。...在这种情况下,每列的最小宽度为100像素(100px),并且可以扩展(1fr)以填充容器中的可用空间。

    30610

    为何UI设计稿与开发出的界面有差异?设计师必读技术干货

    静电说:这是一篇技术流的干货,作者从开发者的角度给我们分析了为什么设计师在Sketch中设计出的设计稿与开发出来的效果会产生差异。不妨来读一读吧!...左图是Sketch的屏幕截图,右图是iOS上开发出来的真实样子。这些差异在渲染图形时会出现。它们具有完全相同的字体,行距,阴影半径,颜色和渐变属性-所有常量都相同。 ?...如您所见,在从设计文件到实际代码的转换过程中,原始设计的某些细节可能会丢失。我们将探索其中的一些细节,以便您知道要注意什么以及如何解决它们。 为什么要在乎细节?...No.2 阴影 与具有通用布局规则的版式不同,阴影的定义不太明确。我们看下图: ? 你会发现,在默认情况下,iOS中的阴影较大。这在矩形的顶部边缘,差异最大。...在Sketch和iOS开发的实现层面,阴影的差异很明显。有时候我们发现具有完全相同阴影参数的设计在Sketch中表现很棒,但是真实开发后,效果反而大打折扣。 ? 如何解决这个问题?

    2.3K21
    领券