用点填充空白区域答案

【问题标题】：Fill in empty space with dots用点填充空白区域
【发布时间】：2017-12-16 06:04:57
【问题描述】：

我正在尝试获得与this question 相同的结果，但无法获得。我会添加评论，但我没有足够的声誉。

这是我当前的代码。

dl {
  width: 400px
}

dt {
  float: left;
  width: 300px;
  overflow: hidden;
  white-space: nowrap
}

dd {
  float: left;
  width: 100px;
  overflow: hidden
}

dt:after {
  content: " .................................................................................."
}

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<dl>

  <dt>Drug 1</dt>
  <dd>10ml</dd>

  <dt>Another drug</dt>
  <dd>50ml</dd>

  <dt>Third</dt>
  <dd>100ml</dd>
  
</dl>

</html>

当我尝试 HTML5 时，<!DOCTYPE html><html>，它根本不起作用！

下面的DOCTYPE 可以使用什么代码？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

【问题讨论】：

您显示的第一个文档类型是所有新网页的当前文档类型，并且是必需的。您展示的第二个仅适用于 XHTML。您不应该使用第二个，因为尽管您的标记中有 XML 序言，但我确信您没有提供 XHTML。您显示的是混乱的标记，令人困惑。

标签： css xhtml doctype

【解决方案1】：

你需要：

用dl包裹每个部分
添加CSSdd { margin: 0 }

dd {  margin: 0  }

dl {
  width: 400px
}

dt {
  float: left;
  width: 300px;
  overflow: hidden;
  white-space: nowrap
}

dd {
  float: left;
  width: 100px;
  overflow: hidden
}

dt:after {
  content: " .................................................................................."
}

<dl>
  <dt>Drug 1</dt>
  <dd>10ml</dd>
</dl>

<dl>
  <dt>Another drug</dt>
  <dd>50ml</dd>
</dl>

<dl>
  <dt>Third</dt>
  <dd>100ml</dd>
</dl>

【讨论】：

天哪！...现在，当我尝试使用 DOMPDF 创建我的页面索引时失败了：'（有什么想法吗？
对不起@Stackoverflow 我直到现在才看到你的消息。你解决了吗？
感谢您的关注，这是大学的工作，我现在离开... :-) 可以联系 StackOverflow.com 中的用户（电子邮件、PM）吗？
@Stackoverflow 你可以创建一个聊天室：chat.stackoverflow.com/rooms/new