Html CSS：右标签和缩放下的浮动左换行

我有一个带有

图例

和

字段集

s的表单，需要在

输入

s的左侧有

标签

s

我只想用CSS设置我的

表单

标签

s的样式，但是CSS选择器找不到前面的同级，因此我需要在HTML代码中的

输入

之后写入

标签

，以便选择与无效

输入

s连接的

标签

s，并使用

浮动：左

当

输入

填写错误时，需要更改相应的标签。 在以下示例中，标签变为红色，验证失败描述消息展开

说明

标签

需要与相应的输入位于同一行（出于美观目的），或者至少左角应与

输入的最右点对齐

当我尝试放大时出现问题。
我通过将较低的宽度设置为外部
div
来模拟这种情况


#容器{
宽度：200px；
}
形式{
边框：1px纯红；
溢出：自动；
}
字段集{}
第{}节
输入[type=“text”]{
显示：内联块；
}
输入[type=“text”]+标签{
显示：内联块；
浮动：左；
文本对齐：右对齐；
宽度：80px；
}
输入[type=“text”]：无效+标签{
颜色：红色；
}
输入[type=“text”]+标签+标签{
显示：无；
}
输入[type=“text”]：无效+标签+标签{
显示：内联块；
颜色：红色；
}
.field行{
显示：内联块；
空白：nowrap；
}

控件组
弗斯特
知识是一种美德，是一种美德，是一种美德，是一种美德。
第二
如果您只需要支持现代浏览器，我建议您放弃使用float，改用flexbox

您所需要做的就是使
.field行
div
显示：flex
然后为输入和标签元素设置
顺序
属性。像这样：


#容器{
宽度：200px；
}
形式{
边框：1px纯红；
溢出：自动；
}
字段集{}
第{}节
输入[type=“text”]{
顺序：2；
}
输入[type=“text”]+标签{
文本对齐：右对齐；
顺序：1；
宽度：80px；
}
输入[type=“text”]：无效+标签{
颜色：红色；
}
输入[type=“text”]+标签+标签{
显示：无；
顺序：3；
}
输入[type=“text”]：无效+标签+标签{
颜色：红色；
显示：内联；
}
.field行{
显示器：flex；
空白：nowrap；
}

控件组
弗斯特
知识是一种美德，是一种美德，是一种美德，是一种美德。
第二
谢谢！我已经看到，在Safari 10中，
order
有一些问题，但是，我想，它不应该影响这个案例。