gpt4 book ai didi

html - 在没有表格的情况下将 HTML 元素居中于其他两个元素之间

转载 作者:太空宇宙 更新时间:2023-11-03 17:39:13 25 4
gpt4 key购买 nike

这次我尝试将一个元素置于其他元素之间。有了一张 table ,它的外观和行为就像我想要的那样完美。查看 fiddle 中的第一条蓝线(也许您需要更宽的结果窗 Eloquent 能看到正确的行为):

body, div, table, td {
margin: 0;
border: 0;
padding: 0;
}

table, td {
border-collapse: collapse;
}

.settings {
background: blue;
}

.settings input.year{
width: 3em;
}

.settings input.month,
.settings input.day,
.settings input.hour,
.settings input.minute{
width: 1.5em;
}

.settings input.numbers{
width: 2em;
}

.settings p{
color: white;
}

/* version without table */
.settingsWithoutTable {
background: blue;
}

.settingsWithoutTable input.year{
width: 3em;
}

.settingsWithoutTable input.month,
.settingsWithoutTable input.day,
.settingsWithoutTable input.hour,
.settingsWithoutTable input.minute{
width: 1.5em;
}

.settingsWithoutTable input.numbers{
width: 2em;
}

.settingsWithoutTable span{
color: white;
}
<body>
...<br>
<div class="settings"><table><tr>
<td><p>From</p></td>
<td><input class="year" value="2014"/></td>
<td><input class="month" value="04"/></td>
<td><input class="day" value="03"/></td>
<td><input class="hour" value="02"/></td>
<td><input class="minute" value="01"/></td>
<td><button>Frst</button></td>
<td><button>Scnd</button></td>
<td style="width: 50%"></td>
<td><button>Push</button></td>
<td style="width: 50%"></td>
<td><p>Num</p></td>
<td><input class="numbers"></input></td>
</tr></table></div>
...
<div class="settingsWithoutTable">
<span>From</span>
<input class="year" value="2014"/>
<input class="month" value="04"/>
<input class="day" value="03"/>
<input class="hour" value="02"/>
<input class="minute" value="01"/>
<button>Frst</button>
<button>Scnd</button>
<span style="width: 50%"></span>
<button>Push</button>
<span style="width: 50%"></span>
<span>Num</span>
<input class="numbers"></input>
</div>
</body>

现在我听说现在表格不适合布局,这就是我试图摆脱它的原因。我尝试的所有内容(如内联 block 等)都会带来像换行符这样的坏结果。

结果应该保持在一行中,元素应该像表格版本一样对齐。

有什么好的方法只用css吗?

最佳答案

如果您不介意放弃对旧版 IE 浏览器的支持,您可以使用 FlexBox

只需将“行”的显示设置为 flex 并相应地调整“单元格”。

/* version without table */

.settingsWithoutTable {
background: blue;
display: flex;
min-width: 400px;
}
.settingsWithoutTable .center {
text-align: center;
width: 100%;
}
.settingsWithoutTable input.year,
.settingsWithoutTable > button,
.settingsWithoutTable span {
max-width: 3em;
min-width: 3em;
}
.settingsWithoutTable input.month,
.settingsWithoutTable input.day,
.settingsWithoutTable input.hour,
.settingsWithoutTable input.minute {
max-width: 1.5em;
min-width: 1.5em;
}
.settingsWithoutTable input.numbers {
max-width: 2em;
min-width: 2em;
}
.settingsWithoutTable span {
color: white;
}
<div class="settingsWithoutTable">
<span>From</span>

<input class="year" value="2014" />
<input class="month" value="04" />
<input class="day" value="03" />
<input class="hour" value="02" />
<input class="minute" value="01" />
<button>Frst</button>
<button>Scnd</button>
<div class="center">
<button>Push</button>
</div> <span>Num</span>

<input class="numbers" />
</div>

这是您的 Fiddle 调整宽度

关于html - 在没有表格的情况下将 HTML 元素居中于其他两个元素之间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29376062/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com