css - 样式表 - 盒子模型 - 嵌套盒子

Question

假设我有一个样式表

dt{
width=15%;
}
dt x{
  background-color:red;
  ????
}

还有一些 html...

<dt>abc
  <x> xyz </x>
</dt>

如果有什么可以代替 ????使由“dt x”定义的框成为 dt 的余数？

想法是应该有一个 15% 宽的框，左侧有文本“abc”，没有背景颜色，其余 15% 的框填充红色背景。

Answer 1

float :右；

这会给你(基本上)你想要的东西。

在我看来，您可能希望为 ABC 提供固定宽度并将其包含在 div 或其他内容中。

dt x1 {
    width:25%;
}
dt x2 {
     width:75%;
}

<x1>abc</x1><x2></x2>

也许..你可能不得不声明它们是内联的，但我认为这是默认的

编辑:

关于您的评论:

dt {
   background-color: black;
}
dt x {
   background-color: blue;
}

<dt>
<x>abc</x>
</dt>

编辑2:

与您的第二条评论一样:

dt x1 {
    width:25%;
}
dt x2 {
     width:75%;
     background-color: pink;
}

<x1>abc</x1><x2></x2>