MDL卡未在父卡顶部对齐
是指在前端开发中，使用MDL（Material Design Lite）框架时，子卡片没有与父卡片的顶部对齐。
MDL是一种基于Google Material Design设计原则的前端框架，它提供了一套美观、易用的UI组件和样式，帮助开发者快速构建现代化的Web应用程序。
在MDL框架中，卡片（Card）是一种常用的UI组件，用于展示信息或内容块。通常情况下，子卡片应该与父卡片的顶部对齐，以保持整体布局的一致性和美观性。
如果MDL卡未在父卡顶部对齐，可能是由于以下原因导致的：
- CSS样式问题：可能是由于自定义的CSS样式或者其他样式冲突导致子卡片位置偏移。
为解决这个问题，可以检查CSS样式表中是否存在与卡片相关的样式，并确保没有对子卡片的位置进行额外的调整。
- HTML结构问题：可能是由于HTML结构的错误或者嵌套关系不正确导致子卡片位置偏移。
为解决这个问题，可以检查HTML代码中卡片的嵌套关系，确保子卡片正确地嵌套在父卡片内部，并且没有其他无关元素干扰。
- JavaScript交互问题：可能是由于JavaScript代码中对卡片位置的操作不正确导致子卡片位置偏移。
为解决这个问题，可以检查JavaScript代码中对卡片位置的操作，确保没有对子卡片位置进行错误的调整或者偏移。
对于MDL卡未在父卡顶部对齐的问题，可以参考腾讯云提供的MDL文档和相关资源进行解决。腾讯云并没有直接提供与MDL框架相关的产品或者服务，但可以通过腾讯云提供的云服务器、云存储等基础设施服务来支持MDL框架的部署和运行。
参考链接： MDL官方文档：https://getmdl.io/ 腾讯云产品：https://cloud.tencent.com/
相关·内容
我搜索了很长一段时间，但他们都说要给出宽度，制作显示块，并设置文本对齐。这是我为欢迎卡做的。它也适用于第一张卡。但它不适用于第二张卡片图标和文本。
第一个可以工作，但第二个不行：
<div class="mdl-grid" id="sub-content">
<!--First Card-->
<div class="mdl-cell mdl-cell--4-col main-card-medium mdl-shadow--2dp">
<i class="sub-i
浏览 1提问于2017-03-29得票数 0
1回答
在使用的网页中，我尝试使用嵌套的Tabs。因此，请在JSFiddle链接或下面的演示中看到，如果单击标签为ONE的外部选项卡，您将看到4个嵌套选项卡。问题在于这些嵌套的选项卡：
默认情况下，这些嵌套选项卡中的第一个是活动的，因此它的选项卡头/标题下面有一个粉红色的重音。当我单击其他嵌套选项卡时，应该从第一个嵌套选项卡中删除这个粉红色的重音，并将其添加到单击的选项卡中。但这是不可能的。
当我在localhost上运行这个测试时，URL中的#something部件确实会发生相应的变化(在默认情况下，url以#scroll-tab-1结尾，但当我单击标题为BOB的选项卡时，URL更改为以#sc
浏览 4提问于2017-03-18得票数 1
我有一个材料设计精巧的页面，使用的选项卡布局，从一个单一的标签。我有一个菜单操作，它添加了一个附加选项卡。JavaScript代码将所需的标记和内容添加到标签栏中，并将相关和内容附加到标记中。
然后，JavaScript代码为这两个加法的父元素调用componentHandler.upgradeElement()函数。
从表面上看，这是可行的，新选项卡显示在标题中，新内容可以通过单击选项卡显示。但是，单击原始选项卡显示“升级”是不完整的。制表符栏中的两个元素有些不同，都有"is-active“CSS类。
<div class="mdl-layout__tab-bar-co
浏览 1提问于2016-03-11得票数 0
2回答
如何将材料设计Lite卡片对齐
、、、、
我试图建立一个简单的网页，其中有卡片使用材料，设计，精巧的组成部分，但一个问题是整个网页的布局。如何将mdl卡与屏幕的右侧对齐？我已经尝试过浮动:右；在css中，然后卡只是在同一个位置向右移动，而不是屏幕上。帮我换一下
<div class="mdl-cell mdl-cell--6-col">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
浏览 8提问于2017-01-08得票数 4
回答已采纳
我的Angular2应用程序正在取得很好的进展，再次感谢您澄清如何使用MDL中的scss文件(回答了)。
但是，我现在很难覆盖MDL设置的某些默认样式。例如，我不希望选项卡中的选项卡使用“正当性-内容:中心”，而是使用“正当性-内容: flex-start"，因此选项卡左对齐。
我最初的方法是试图通过提供以下内容来覆盖该属性：
.mdl-tabs__tab-bar {
justify-content: flex-start;
}
直接在包含选项卡的组件的scss文件中。
但这不能作为我的选择器的Angular2作用域，例如：
.mdl-tabs__tab-bar[_ngcont
浏览 3提问于2016-10-25得票数 2
回答已采纳
我有一系列按钮(使用vue-mdl)，它们的作用就像选项卡开关，因此视图中有“当前”选项卡的概念。我想将一个类绑定到按钮上，这个按钮是“活动的”，但是我还没有找到一种不使用计算属性来实现它的方法。计算的属性很简单，实际上只需要将按钮id与currentView数据值进行比较。到目前为止我已经知道了：
<mdl-button id="accepted" :class="{activeTab: isAccepted}">Accepted</mdl-button>
<mdl-button id="rejected"
浏览 0提问于2016-11-30得票数 0
回答已采纳
1回答
我正在使用Material Design (MDL)卡在标题中显示数值。我希望它们右对齐，但默认情况下它们是左对齐的。我试过设置各种样式，但都被忽略了。如何在卡片标题中右对齐h2？ <div class="mdl-card card--count">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">
999
</h2>
<
浏览 14提问于2021-02-03得票数 0
回答已采纳
我想在标签布局中使用标签布局。我正在使用Material Design lite，它已经为选项卡创建了类，因此我正在尝试使用相同的类。
标签编号1-水平标签可以单独使用，没有任何问题。Tab Number 2- Vertical Tab单独工作没有任何问题。
现在我尝试在标签号1中使用标签号2。标签号1的工作状态保持不变，但标签号2不起作用。
请看一下这个插销链接：
代码- HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="material-design-lite@1
浏览 9提问于2016-04-19得票数 2
我试图将数据"testData“传递给子组件‘multi’，但是当我尝试这样做时，它会返回这个错误。
未明错误:模板解析错误:无法绑定到“数据”，因为它不是“app-多卡”的已知属性。
我刚开始变角，所以我很确定我遗漏了一些明显的东西。
父TS
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-information-general-multi',
templateUrl: './information-general-multi
浏览 2提问于2018-06-14得票数 1
回答已采纳
1回答
我需要保持相同的div对齐，但它们都是右对齐的:这里我有一个图像:正如你所看到的，'hello‘和'helloooooo’都是右对齐的，但我希望它们都是左对齐的。
所以看起来是这样的：
HTML
<ul class="fu-form--job-edit-details mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<span
浏览 4提问于2017-02-22得票数 0
1回答
我正在使用材料卡，想要使背景模糊，但不想在div上产生模糊效果。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl
浏览 8提问于2019-07-28得票数 2
回答已采纳
我需要在app.module.ts中滚动来自另一个产品组件的标记
app.module.ts
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<nav-header></nav-header>
<main class="mdl-layout__content" #scrollMe>
<router-outlet></router-outlet>
<
浏览 24提问于2018-03-02得票数 0
回答已采纳
我对mdl不在行，但是我想创建一个mdl卡，它看起来和下面的图片完全一样，我该怎么做呢？
在阅读了文档之后，这就是我想出来的。但看起来不太好。
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
height: 60px;
background: black
}
.demo-card-wide.mdl-card {
浏览 4提问于2017-10-05得票数 1
回答已采纳
1回答
我有一个Material Design Lite复选框，它的标签包含一个指向Ts&Cs；的链接，但单击该链接会激活该复选框。代码如下所示：
<label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input mdl type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]=
浏览 2提问于2016-09-30得票数 0
1回答
CSS动画扩展组件
、、、、
我有两个卡段并排使用挠性盒。每个框都有一个“展开”按钮(例如，如果我展开右边，它只隐藏左卡部分，反之亦然)。我基本上想要动画的扩展卡，但我不知道如何，或它是否可能。
<mdl-card *ngIf="hideLeft" [@leftAnimation] class="card-left" mdl-shadow="2" mdl-card-expand>
<mdl-card-title>
<h2 mdl-card-title-text>Left</h2>
浏览 2提问于2017-11-08得票数 0
回答已采纳
什么css应该对齐他们在同一行？
<div class="discount-tab">
<h1 class="discount-heading">Book your first adventure with us at 10% discount</h1>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Book now</button&
浏览 17提问于2021-12-18得票数 3
如果我为mdl-layout__header-row类设置了max-width属性，那么下拉菜单就不能正常工作了，它们没有对齐。去掉max-width属性，一切都会正常工作。
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="
浏览 36提问于2017-02-26得票数 0
回答已采纳
我正在使用布局组件页面中的mdl选项卡栏。
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout
浏览 1提问于2015-07-12得票数 11
我有以下HTML代码：
<div class="mailTabs mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">TAB1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">TAB2</a>
<a href="#scroll-tab-3&
浏览 5提问于2015-11-02得票数 3
我有这个从材料设计的演示卡，如何根据数据库的值来显示多个数据卡。
如果我的数据库中的值是4，那么我需要在UI中显示4个数据卡。在我的例子中，后端数据库是mongoDB。
<!-- Square card -->
<style>
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
}
.demo-card-square > .mdl-card__title {
color: #fff;
background:
url('../assets/demos/dog.png
浏览 1提问于2016-05-20得票数 2
回答已采纳
1回答
UWP网格填充父窗口
、、、
我们正在做一个学校项目，已经陷入了一个死胡同。我们试图让grid填充整个父窗口，但我们根本无法做到这一点。
这就是设计师所展示的，也是我们希望它看起来的样子：
这就是我们运行它时的样子：
以下是我们的xaml代码：
<Grid x:Name="Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, RelativeSource = {RelativeSource Mode=TemplatedP
浏览 1提问于2015-11-30得票数 11
回答已采纳
我使用的是材料设计精简版。
在我的仪表板菜单中，我尝试显示4个选项卡。
我尝试过在仪表板URL上以多种方式显示4个选项卡。
这是我的仪表盘菜单--
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://code.get
浏览 6提问于2016-07-28得票数 1
回答已采纳
1回答
动态添加可滚动选项卡mdl反应？
、、、、
我用的是材料设计和反应。在使用单独的布局和选项卡时，我成功地添加了动态选项卡，但是当我尝试使用mdl bar、mdl即插即用时，我无法更新布局，因此该选项卡无法工作。
<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header className="mdl-layout__header">
<div className="mdl-layout__header-row">
浏览 1提问于2016-12-04得票数 0
回答已采纳
I试图使音频控件后面的文本与音频控件中的文本非常一致，但其方式较低，我使用style="vertical-align: text-top"似乎没有任何影响
<div>
<span name="fileplay">
<audio preload="none" controls="controls"><source src="file:/E:/Music/Wav/David%20Guetta/Guetta%20Blaster/01%20-%2007%20-%20Money.
浏览 3提问于2020-11-18得票数 0
回答已采纳
1回答
如下图所示，我的MDL开关与它的标签不对齐。我尝试过的对中技术没有任何效果。它们是：
margin: 0 auto
具有父级上的display: inline-block和text-align: center
窗体两边的<div class="mdl-layout-spacer"></div>
Codepen：
浏览 0提问于2016-08-18得票数 0
1回答
MDL卡未在父卡顶部对齐
、、、
我使用mdl框架来设计我的webapp。
<div class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell mdl-cell--top mdl-cell--6-col">
...
<div class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell mdl-cell--top mdl-cell--6-col">
...
<div ng-init="showLmsSwitch()" class="demo
浏览 11提问于2017-08-29得票数 0
回答已采纳
如何在MDL卡组件之间添加空间？
<div class="demo-card-event mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h4>
Featured event:<br>
May 24, 2016<br>
7-11pm
</h4>
</div>
<div class="mdl-card__
浏览 2提问于2017-08-23得票数 0
回答已采纳
1回答
我在修复我的两个页面上的一些文本时遇到了问题。我在左边有一个盒子，里面有一些文本，右边有两张MDL卡，里面有对话框。
我的问题是，一旦我在CSS中为文本放置了一个固定位置的术语，我的卡片就会重叠并重新对齐到左边。我试图控制它们，但这似乎没有任何帮助，也许我做错了什么。
我喜欢它现在的样子，但我想让MDL卡独立滚动。同样，可能是一个简单的修复，也是我忽略的一些东西，但这是我到目前为止所掌握的：
<div class="mdl-layout__content">
<main>
<div class="b
浏览 10提问于2018-09-27得票数 0
我在这页上有三个标签。
<!-- Tabs -->
<div class="mdl-layout__tab-bar">
<a href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>
<a href="#plots-data-tab" class="mdl-layout__tab">Plots data</a>
<a href="#report
浏览 4提问于2015-10-20得票数 4
回答已采纳
我怎样才能使汉堡(抽屉)菜单与标题栏中的其余项目对齐？所以，把汉堡包菜单移到画好的红色酒吧。
守则是：
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title&
浏览 1提问于2018-01-25得票数 0
回答已采纳
我想把脸图标放在同一行的字段中。代码是这样的：
<i class="material-icons">face</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textf
浏览 3提问于2016-04-02得票数 3
我目前使用的是内置的导航布局的Material Design Lite。我给出了描述链接，以便您能够理解：。我正在尝试使mdl侧抽屉菜单的标题居中对齐。但是它不能正常工作。我努力尝试修复它，但没有找到任何解决方案:首先，我提供了我的工作的屏幕截图：
html代码：
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"><a href="{{ url('/') }}">iPortal</a><
浏览 19提问于2017-03-14得票数 0
回答已采纳
如果我生成了HTML：
<td><span class='n'>123<span class='thousand'>124</span>124</span></td>
<td>not a number</td>
来自Vue.js模板：
<td>{{ num | integer }}</td>
<td>{{ str }}</td>
如何使用CSS选择包含span.n的td？我想把它对齐到右边
浏览 3提问于2017-01-05得票数 0
我有一个组件文件
<div class="content-wrapper">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col panel--raised white-bg top-17">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col sideb
浏览 1提问于2018-10-28得票数 1
1回答
我尝试在一个表单中使用多个嵌套属性，尽管似乎只出现了第一组属性。
下面是HAML模板
.mdl-cell.mdl-cell--10-col.mdl-cell--1-offset
%h3.mdl-typography--display-1= t('.account_title')
= form.fields_for :address do |address_fields|
.mdl-grid
.mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.mdl-cell.mdl-cell--
浏览 3提问于2016-06-12得票数 0
3回答
新手问题；尝试学习网页设计，我已经走到了这一步。但是，有人可以试着给我解释一下吗？
这是我网站中一个特别的部分的样子：
我正在尝试将图像分割为屏幕的40%，文本分割为剩余的60%。它进行得很好，但是我不明白为什么文本出现在底部而不是顶部？我猜这很简单，或者我把它搞砸了？
这是我的HTML：
<section>
<div class="about">
<div class="about_img"></div>
<div class="about_text">
浏览 1提问于2016-02-11得票数 0
1回答
我，我试着把卡片垂直地和水平地放在页面的中间。我，能够将卡片水平地居中。但不能像垂直方向一样对中心。我没有在MDL中找到任何类来垂直对卡进行居中。
中心水平代码
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
<!-- this is just dummy columns -->
</div>
<div class="mdl
浏览 1提问于2017-12-13得票数 7
回答已采纳
我正在使用对话框窗口dialog.vue的组件vue-mdl包。
<template>
<div class="mdl-dialog-container" v-show="show">
<div class="mdl-dialog">
<div class="mdl-dialog__title">{{title}}</div>
<div class="mdl-dialog__content">
<slot&
浏览 2提问于2016-12-26得票数 1
每当我创建一张mdl-card时，它就卡在330px宽的地方，甚至当我分配类mdl-cell mdl-cell--12-col或mdl-cell--8-col或任何东西时，它的宽度仍然是“mdl-mdl-cell--12-col--3-col”相等。我如何使卡用完我给它的整个mdl-cell空间？
浏览 3提问于2016-04-17得票数 0
1回答
当单击“添加文本”按钮时，此HTML文件应将“新文本”写入文本字段。有人知道如何让文本字段的标签在单击按钮时浮动，而不是这样做吗？ ? 谢谢。 textbox.html <!--Template page for all other pages-->
<!--Based MDL items -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X
浏览 15提问于2021-10-12得票数 1
回答已采纳
1回答
我正在使用带有angularjs的MDL选项卡。Tab的定义是：
<header class="mdl-layout__header">
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a ng-href="#fixed-tab-1" ng-click="activateTab('Assets')" class="mdl-layout__tab">Asset Protecti
浏览 2提问于2016-02-27得票数 2
回答已采纳
1回答
我正在尝试Google文档中的。这是我的代码：
码
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
浏览 4提问于2016-03-08得票数 5
回答已采纳
我正在为IOS开发字典，我不明白为什么在我的iPad上，我的应用程序从替换的容器视图开始，在模拟器上一切都很好。但是，当我更改iPad上的当前选项卡时，这一切都完全是我想要的。
On iPad应用程序开始于景观：
更改选项卡后的：
模拟器上的在开始时都在运行：
有什么建议吗？
编辑与searchBar对齐的容器的顶部。
浏览 1提问于2013-12-05得票数 0
回答已采纳
1回答
我正试着做一个MDL网站。我遇到了一些问题..。在添加了一些卡片后，它们不会将一张与另一张水平对齐，而另一张则垂直地在屏幕的右边留下一个大的空白，这将保持没有任何内容。为了给您提供更多的信息，下面是代码：
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-r
浏览 0提问于2015-12-08得票数 3
回答已采纳
在我的HTML中，我有一个div，它有三个div作为孩子。我想让第二个和第三个孩子(这是一个文本和按钮)在中间对齐。
<div class='border'>
<div class='inline-block some-image'> <!-- background image here --> </div>
<div class='inline-block description'> Some Text</div>
<div class
浏览 0提问于2014-12-10得票数 2
所以我有一个div，它看起来像
<div id="socialMediaBarHomepage">
<div id="homepageNewsLink">
<img src="" alt="" class="mr_10"/>
<a href=""></a>
</div>
<div id="socialMediaHeaderBar" class="fl_right">
浏览 2提问于2012-12-22得票数 0
回答已采纳
我有一张作为卡片显示的清单：
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col">
<div class="goal-list-card" *ngFor="let goal of core_goals| values; let j = index;">
<div class="card-title">
<h6 cl
浏览 2提问于2017-04-10得票数 1
回答已采纳
1回答
水平居中显示mdl按钮
、、、、
有没有一种简单的方法让mdl-button水平居中？如下所示的按钮：
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
在不使用mdl-grid的情况下仅在网页上水平居中。或者，在使用mdl-grid时，一般情况下，使用MDL是正确的定位方式吗？
浏览 31提问于2017-03-09得票数 3
回答已采纳
1回答
这是一个非常基本的材料设计问题，但这已经让我发疯了。在的下面示例中，带有类mdl-layout-spacer的div很好地将其后面的元素放置在包含div的右侧。注意日历图标在右边：
<!-- Event card -->
<style>
.demo-card-event.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.demo-card-event>.mdl-card__actions {
浏览 9提问于2017-02-16得票数 0
回答已采纳
1回答
可以在两个组件之间实时更新输入字段吗？
在组件中，我有一个输入字段，它有一个v-model="value“。我想将输入实时传递给另一个组件，并将其填充到输入字段中。
inputValue的数据应该作为值支持传递给组件2。还是我的结果弄错了？
构成部分1
<template>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type
浏览 4提问于2016-02-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
