用点填充空白处

Question

用点填充空白处

我试图得到与这个问题相同的结果，但无法。我想添加评论，但我没有足够的声誉。

这是我当前的代码。

dl {
  width: 400px
}

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

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

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

Run Code Online (Sandbox Code Playgroud)

<?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>

Run Code Online (Sandbox Code Playgroud)

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

什么代码适用于以下内容DOCTYPE？

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Chr*_*ppy 5

你需要：

将每个部分包裹起来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: " .................................................................................."
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	1750 次
最近记录：	8 年，3 月前