我正在使用AngularAngular Material来显示日期控件

代码在下面.

<input type="date" (change)="validateDateRange($event,true, index)"  class="form-control oot-start-date align-middle" name="from" formControlName="startDate" />

.oot-start-date {
    width: 170px;
    display: inline-block;
}

.align-middle {
    vertical-align: middle;
}

使用这些当前设置,它将显示日历控件,如下所示...

Calendar Control

如何将它的面板与日期控件正确对齐?

推荐答案

由于您使用的是本地日期 Select 器,您可以将宽度设置为弹出窗口的宽度,为什么我建议这样做是因为我们需要根据浏览器设置日期 Select 器的样式,这对于一个简单的问题来说只是额外的复杂性!

我们还可以删除您添加的其他与定位相关的css!

<div class="center">
  <input type="date" value="2006-01-01" style="width: 215px" />
</div>

stackblitz

Css相关问答推荐

使用背景滤镜时,伪元素出现在div之前

如何居中对齐容器父对象?

如何为垫子制作圆角- Select 所有角点上的下拉列表

如何使用TailwindCSS溢出?

寻找组件中最大的元素来设置其他组件的高度

Nuxt 3+sass:不能将包含路径与@IMPORT和@USE一起使用

导航栏没有使用nextui获取页面的全部宽度

可以在 JavaFX CSS 中同时使用 dropshadow 和 insideshadow 吗?

如何取消 CSS 伪类中的属性设置?

如何使用 :has() 父 Select 器 Select 父元素的子元素,在父元素和子元素之间没有中间层的情况下?

当您到达页面底部时,如何使页脚 div 将附加的 div 向上推

如何在保持默认外观的同时更改 javaFX 中按钮的突出显示 colored颜色

使用 CSS 填充悬停过渡的闪烁文本问题

在样式化组件中使图像重叠

弹性盒项目之间的间距

绝对位置和溢出:隐藏

什么是 ::content/::slotted 伪元素,它是如何工作的?

从 css 添加标题属性

了解 Bootstrap 3 中的网格类( col-sm-# 和 col-lg-# )

仅当存在 2 个类时,您可以使用 CSS 定位元素吗?