Question

我有这段代码：

<div>
<p style="float: left; width: 28%; margin-right: 2%; background: #efefef; color: green; border: 1px solid #efefef; padding: 10px;">
<strong>Daniel:</strong><br /> 
AGF - SønderjyskE: X (1-1)<br /> 
Liverpool - Arsenal: 2 (2-1)<br /> 
Tottenham - Everton: X (1-0)</p>
</div>

我喜欢的是得分站在彼此之上，就像我做了一张桌子一样。这有可能吗？我试图在<div>内放一张桌子，但是我无法使它工作。

Answer 1

有很多方法可以做到这一点，其中之一就是......

table,
thead,
tbody,
tr {
  display:block;}
  
th, td {
  text-align:left;
  display:inline-block;}
  
td:nth-of-type(1) {
  width: 100px;}

td:nth-of-type(2) {
  width: 100px;}

 <table>
      <thead>
        <tr>
          <th>Daniel:</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>AGF</td>
          <td>SønderjyskE</td>
          <td>X (1-1)</td>
        </tr>
        <tr>
          <td>Liverpool</td>
          <td>Arsenal</td>
          <td>2 (2-1)</td>
        </tr>
      </tbody>
    </table>

然后，您可以添加任何想要进一步细化外观的样式。

调整<div>中的文本

1 个答案: