将HR设置为与其上方的文本一样长

Question

是否可以动态设置HR长度？我希望它与上面的文字一样长。

<html>
<head><style>
    table { border-collapse: collapse; }
    table, th, td { border: 1px solid black;  padding: 10px;}
</style></head>
<body>
    <table class='rule level_1'>
    <tr>
        <td>
            Lorem ipsum
            <hr>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </td>
    </tr>
    <tr>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit
            <hr>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </td>
    </tr>
    </table>
</body>
</html>

Answer 1

是的，有可能，你应该用<hr> CSS属性将你的文本和<div>元素包装在display: inline-block中，只要文本是这样就可以生成div。

例如：

<div style="display: inline-block">
  Lorem ipsum
  <hr>
</div>

这是一个包含代码的工作代码段：

<html>
<head><style>
    table { border-collapse: collapse; }
    table, th, td { border: 1px solid black;  padding: 10px;}
</style></head>
<body>
    <table class='rule level_1'>
    <tr>
        <td>
        <div style="display: inline-block">
            Lorem ipsum
            <hr>
        </div>
        <br>

        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </td>
    </tr>
    <tr>
        <td>
        <div style="display: inline-block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit
            <hr>
        </div>
        <br>

        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </td>
    </tr>
    </table>
</body>
</html>

Answer 2

这可能是一种更好的方法，无需使用HR。

table span {
  display: inline-block;
  padding: 8px 0;
}

table span:first-child {
  border-bottom: 1px solid black;
}

<table class='rule level_1'>
  <tr>
    <td>
      <span>Lorem ipsum</span>
      <span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      <span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
    </td>
  </tr>
</table>

Answer 3

HR无法执行此操作，请将文本包含在span和user边框底部，而不是填充底部。

Answer 4

hr可以避免变成br或隐藏，并且可以通过背景绘制边框。

结果类似于具有hr外观的下划线（颜色也可以与文本不同）

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  padding: 10px;
}

td:first-line {
  background: linear-gradient(to top, lightgray 1px, black 2px, transparent 2px);
  line-height: ; /* reset this if needed see example next  */
}

td hr {/* hide hr if there */
  width: 0;
}
code {font-weight:bold;color:gray;}

.lh:first-line {line-height:3em;}

<table class='rule level_1'>
  <tr>
    <td>
      hide <code>hr</code> below
      <hr> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </td>

  </tr>
  <tr>
    <td>
      <code>BR</code> might be used for the line-break
      <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </td>
  </tr>  <tr>
    <td class="lh">
      <code>BR</code> used + line-height on <code>:first-line</code>
      <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </td>
  </tr>
</table>

将HR设置为与其上方的文本一样长

问题描述投票：1回答：4

4个回答

最新问题

将HR设置为与其上方的文本一样长

问题描述 投票：1回答：4

4个回答

最新问题

问题描述投票：1回答：4