html - 在 dd 上使用表格单元格

Question

我正在尝试将项目排成一行。

<dt>2018.05.10</dt>
  <dd>
    <a href="http://www.nippon-shindo.co.jp/pdf/2019_03tr.pdf" target="_blank">
      <p class="cell">
        <span class="orange">></span>中間期 決算短信 &ensp;[ PDF形式 146KB ]
      </p>
    </a>
</dd>

dl {
    display: table;
    flex-wrap: wrap;
}

#summary .cell {
    display: table-cell;
}

但无法使这些内联。

标签： htmlcss

Answer 1

dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0
}

dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  padding: 0;
  margin: 0
}

dd {
  float: left;
  width: 25%;
  /* adjust the width; make sure the total of both is 100% */
  padding: 0;
  margin: 0
}

<dl>
  <dt>2018.05.10</dt>
  <dd>

    <a href="http://www.nippon-shindo.co.jp/pdf/2019_03tr.pdf" target="_blank">
      <p class="cell">
        <span class="orange">></span>中間期 決算短信 &ensp;[ PDF形式 146KB ]
      </p>
    </a>

  </dd>
  <dd><img align="right" src="images/summary/pdf.png"></dd>
  <dt>2017.11.14</dt>
  <dd>

    <a href="http://www.nippon-shindo.co.jp/pdf/2019_03tr.pdf" target="_blank">
      <p class="cell">
        <span class="orange">></span>中間期 決算短信 &ensp;[ PDF形式 146KB ]
      </p>
    </a>

  </dd>
  <dd><img align="right" src="images/summary/pdf.png"></dd>

  <dt>2017.08.09</dt>
  <dd>

    <a href="http://www.nippon-shindo.co.jp/pdf/2019_03tr.pdf" target="_blank">
      <p class="cell">
        <span class="orange">></span>中間期 決算短信 &ensp;[ PDF形式 146KB ]
      </p>
    </a>

  </dd>
  <dd><img align="right" src="images/summary/pdf.png"></dd>


  <dt>2018.02.14</dt>
  <dd>

    <a href="http://www.nippon-shindo.co.jp/pdf/2019_03tr.pdf" target="_blank">
      <p class="cell">
        <span class="orange">></span>中間期 決算短信 &ensp;[ PDF形式 146KB ]
      </p>
    </a>

  </dd>
  <dd><img align="right" src="images/summary/pdf.png"></dd>

</dl>

上面我有 css 使用 float 如果你想要 4 列，你可以使用 css 宽度并添加 dd

两个空格 - 输入  四个空格 - 输入  Tab - 输入    

希望对你有帮助