我必须列出数据列表,一个ID为dates,另一个ID为nums. Date和Num中的字母数不相等,如何才能将Nums中的每个div都准确地放在Date下呢?

#dates div{
    display: inline-block;
    margin-left: 20px;
}
#nums div{
    display: inline-block;
    margin: 30px;
    position: relative;
    top:-20px;
}
<body>
    <div id="dates">
        <div>Aug 5</div>
        <div>Aug 6</div>
        <div>Aug 7</div>
        <div>September 12</div>
    </div>
    <div id="nums">
        <div>9</div>
        <div>7</div>
        <div>5</div>
        <div>3</div>
    </div>
</body>

例如,这里的3应该向右转,因为它应该是9月的exactly down of the middle. 我不需要像边距和左右这样的像素.因为数字可能会改变,但它必须仍然在日期的中段. 谢谢

推荐答案

如果你不能用table(你应该用),那就用css表格.

div {
  text-align: center;
  padding: 1em;
  border: 1px solid red;
}

#nums,
#dates {
  display: table-row;
}

.showwidth {
  display: table-cell;
}
<div id="dates">
  <div class="showwidth">Aug 5</div>
  <div class="showwidth">Aug 6</div>
  <div class="showwidth">Aug 7</div>
  <div class="showwidth">September 12</div>
</div>
<div id="nums">
  <div class="showwidth">9</div>
  <div class="showwidth">7</div>
  <div class="showwidth">5</div>
  <div class="showwidth">3</div>
</div>

Html相关问答推荐

使用固定的HTML代码创建两个可向右滚动的行

如何在angular 17.2中使用routerLink解决此错误

如何使用CSS在<;表格中<;SVG&>?

在WooCommerce单一产品页面上使产品图片库粘滞(固定)

在css中,如何在英雄版块的标题后面做一个粘性的导航栏?

Html视频标签:圆角像素化

带下划线的文本应该有延长的下划线,以使其图像悬停

目标第一个祖先标签的 XPath

是否可以制作响应式 CSS 剪辑路径?

伪元素:after和溢出隐藏

如何从 div 内的图像中删除填充而不从其他所有内容中删除填充?

在shiny 的应用程序中使用图标功能时出错

a with