主页 / 问题 / 1601277
Accepted
peirw
Asked:2024-11-30 19:49:52 +0000 UTC2024-11-30 19:49:52 +0000 UTC

HTML，表格。显示流畅

  • 772
             <div class="info">
                <table>
                    <tr>
                    <td>
                        Cтатус:
                        <div class="right-align">Игрок</div>
                    </td>
                    <td>
                        Отыграно:
                        <div class="right-align">
                            125
                            часов
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Организация:
                        <div class="right-align">LSPD</div>
                    </td>
                    <td>
                        Профессия:
                        <div class="right-align">Старший майор</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Проживание:
                        <div class="right-align">Улица 20 брит</div>
                    </td>
                    <td>
                        Бизнес:
                        <div class="right-align">24/7 магазин</div>
                    </td>
                </tr>
                </table>
            </div>

桌子

它应该是什么样子

问候。我不明白如何实现它，使 div 位于文本的右侧且处于同一水平，而不是在文本下方。我很高兴收到对此的反馈。我尝试使用CSS来做到这一点，但你只能改变左缩进

html

1 个回答

  1. Best Answer

    您有两种主要方式：

    1. 拒绝div赞成span（这就是当涉及到行的语义时的目的）并且html将为您做所有事情，除了元素之间的空间。对于这种情况，自古就有对齐float。但如果出于某种原因div它对你来说如此重要，那么删除它的“块状性”就没有什么区别了。

    .info_div div {
  display: inline-block;
  padding-left: 8px;
  float: right;
  color: red;
}

.info_span span {
  padding-left: 8px;
  float: right;
  color: darkgreen;
}
    <div class="info_div">
  <table border="1">
    <tr>
      <td>Cтатус:<div>Игрок</div></td>
      <td>Отыграно:<div>125 часов</div></td>
    </tr>
    <tr>
      <td>Организация:<div>LSPD</div></td>
      <td>Профессия:<div>Старший майор</div></td>
    </tr>
    <tr>
      <td>Проживание:<div>Улица 20 брит</div></td>
      <td>Бизнес:<div>24/7 магазин</div></td>
    </tr>
  </table>
</div>

<br>

<div class="info_span">
  <table border="1">
    <tr>
      <td>Cтатус:<span>Игрок</span></td>
      <td>Отыграно:<span>125 часов</span></td>
    </tr>
    <tr>
      <td>Организация:<span>LSPD</span></td>
      <td>Профессия:<span>Старший майор</span></td>
    </tr>
    <tr>
      <td>Проживание:<span>Улица 20 брит</span></td>
      <td>Бизнес:<span>24/7 магазин</span></td>
    </tr>
  </table>
</div>
<br>

    1. 对于表格单元格内更复杂的集合，您还可以使用 and flex，但这里显然不需要它。

    PS至于您以图片形式提供的盘子及其单列性质这一事实......如果您完全需要这种形式，请table按应有的方式重新排列它，并且不要只提供任何内容一个例子。

    .info span {
  padding-left: 24px;
  float: right;
  color: darkgreen;
}
    <div class="info">
  <table border="1">
    <tr><td>Cтатус:<span>Игрок</span></td></tr>
    <tr><td>Отыграно:<span>125 часов</span></td></tr>
    <tr><td>Организация:<span>LSPD</span></td></tr>
    <tr><td>Профессия:<span>Старший майор</span></td></tr>
  </table>
</div>

    • 0

相关问题