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

Yes it's possible, you should wrap your text and <h1>Title</h1> <pre> <p>Hello</p> </pre> element in a <hr> with <div> CSS property to make the div as long as the text is.

For example:

display: inline-block

Here is a working snippet with your code:

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

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和用户border-bottom，而不是填充底部。

Answer 4

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: