折叠表行'；纯CSS中的s高度（不影响表格宽度）

对于对齐的表单，我有一个带有

表的HTML：

<div id="one">
  <p>
    <label for="a">a</label> <input type="text" id="a">
  </p>
  <p class="h">
    <label for="b">bbbbbb</label> <input type="text" id="b">
  </p>
</div>

#一个
是自动计算的宽度，而
标签
s和
输入
s的宽度未知。我想要一个对齐表单的功能，但是这样将class
h
添加到它们的行中就可以删除，为其他元素垂直地留出空间，但不改变
#one
的宽度，因为它应该位于自动计算宽度的其他元素旁边

CSS3中的
.h
定义将使我的“表行”（
p
）高度等于0，或者以其他方式在不更改其父行宽度的情况下直观地删除它？如果需要，我可以更改HTML，但我想找到一个不使用JS的解决方案

可见性：隐藏
不会垂直删除它，
高度：0
不起作用（可能是因为它是
表行
），而
显示：无
不起作用，因为它将有效宽度更改为0。我希望我的
#one
保持相同的宽度。使用
display:block！重要信息
与
height:0组合使用时，部分工作正常，但会留下一个奇怪的垂直空间（并且
块
不应该是
表
的子项）

我搜索的内容与类似，但我搜索的是纯CSS解决方案，没有固定表宽

您可以在此处使用它：。
好的，这可能是您的解决方案。请注意，它不必是灵活的-它也可以与浮动一起工作，但它不适用于
显示：table
（老实说，我并不认为在2018年使用它有什么意义）

顺便说一句，我在
.h
之后又添加了一行，这样我们就可以控制发生了什么。如果一切正常，我们应该看到
.h
垂直“折叠”，以便第一行和第三行接触


#一个{
显示：内联块；
背景色：#F0FFFF；
}
p{
显示器：flex；
证明内容：之间的空间；
边距：0；/*这是至关重要的，因为段落默认设置了一些边距，我不知道您是“重置”还是“规范化”css*/
}
h{
transform:scaleY（0）；/*这实际上是非常常用于设置下拉菜单动画的东西*/
变换原点：50%0；/*这行代码现在对您的问题没有任何影响，但是如果您选择动画“折叠”行的高度，它会将其变换原点设置为上边框的中间*/
身高：0；
}


A.


bbbbbb


A.

这真的很让人困惑。即使是JSFIDLE也帮不了什么忙。我想我可能对你想要达到的目标有些了解，但有几个问题：1。是否绝对有必要使用“css表”？2.您是否预先设定了
#one
的宽度（您从未设置过）？3.你能控制HTML吗？整个结构的最终视觉目标是什么？即：您希望表格看起来如何？
#一个
的宽度应为
自动
。没有必要使用css表格，但这是我在项目中使用的表格，我不想依赖于各种
表格
的默认值-我只想在不知道其宽度的情况下对齐表格（并且表格与其他未知宽度的表格相邻）。我可以控制HTML。视觉目标是，当
p
获得
h
类时，它会消失，为垂直方向的其他内容留出空间，但不会触发表单宽度的变化。我将相应地更新问题。如果您没有在任何位置设置任何元素的宽度，并且宽度是自动的，我想不出一种方法，即删除
.h
不会影响
#one
的宽度。事实上，它正在将宽度恢复为原始状态
.h
更宽，当它出现/可见时，整个表格都会适应它的宽度。
宽度：auto
完全按照它应该做的方式来做-它正在适应内容。我的意思是，这个要求自相矛盾，你不觉得吗？谢谢！我学到了很多。我不知道
justify content
，所以我认为唯一合理的方法是使用
display:table
对齐宽度未知的标签和表单字段。当然，我从来没有听说过
可见性：collapse
。这个
visibility
选项真的让我吃惊：D。
#one {
  display: table;
  width: auto;
}

p {
  display: table-row;
}

p label, p input {
  display: table-cell;
}