首页
学习
活动
专区
工具
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.6K20

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

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游戏手册内容。

    12K10

    图文学习前端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. 宽松行距、紧凑行距 行距是行之间空间,行距太紧凑,会让视线难以从行尾扫视到下一行首。...固有字距是两个字母相互组合时距离,使它们间距与其他字母间距视觉上统一。创作字体时,就纳入了固有字距考量,这个过程可能要花上数月。

    1.9K30

    文字如何实现完美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.6K20

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

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

    3.5K30

    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.4K40

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

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

    29620

    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

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

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

    28610

    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.1K10

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

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

    2.2K21

    Python 进阶指南(编程轻松进阶):三、使用 Black 工具来格式化代码

    水平间距 空白对于可读性来说和你写代码一样重要。这些空格有助于将代码不同部分彼此分开,使它们更容易识别。本节解释了水平间距——即单行代码中空白间隔,包括该行前面的缩进大小。...Black 代码结尾和注释开头之间加了两个空格。 一般来说,我建议不要把注释放在代码行末尾,因为它们会使代码行太长而无法屏幕上阅读。 垂直间距 垂直间距是代码行之间空白行位置。...因为这是主观,所以 Black 不会修改函数或方法垂直间距。 垂直间距最佳实践 Python 一个鲜为人知特性是,可以使用分号一行中分隔多个语句。...可以和它if语句写在同一行: if name == 'Alice': print('Hello, Alice!') 但是仅仅因为 Python 允许一行包含多个语句并不意味着这是一个好示例。...接下来几十年里,打印机、显示器和命令行窗口都保留了 80 标准。 但在 21 世纪,高分辨率屏幕可以显示超过 80 个字符宽文本。较长行长度可以让您不必垂直滚动来查看文件。

    2.1K90

    每天10个前端小知识 【Day 17】

    这个方法,基本上可以解决大部分浏览器下inline-block元素之间间距(IE7等浏览器有时候会有1像素间距)。...Relative 相对定位方式,相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余未被占用空间进行定位(父元素由多个相对定位子元素时可以看出),且会占用该元素文档初始页面空间...所以,项目之间间隔比项目容器边框间隔大一倍 space-between - 项目项目的间隔相等,项目容器边框之间没有间隔 space-evenly - 项目项目的间隔相等,项目容器边框之间也是同样长度间隔...stretch:拉伸,占满单元格整个宽度(默认值) 应用场景 文章开头就讲到,Grid是一个强大布局,如一些常见 CSS 布局,如居中,两布局,三布局等等是很容易实现以前文章,也有使用...而如果外部引用css代码,解析html结构过程遇到外部css文件,才会开始下载css代码,再渲染 所以,CSS内联使用使渲染时间提前。

    14411
    领券