Question

我正在尝试将行号添加到具有不等行高的现有html中 - 许多类型的字体大小以及图像。每一行看起来像 -

<div id="1"><right><span>line 1</span></right></div>
<div id="2"><right><span>line 2</span></right></div>
<div id="3"><right><span>line 3</span></right></div>

是否有简单的方法来添加垂直对齐的行号？感谢

Answer 1

通过this问题的启发，我为您的问题开发了一个解决方案。我希望这就是你要找的东西。您可以使用counter-reset and counter-increment property来实现此目标

＆＃13;

<html>
    <head>
        <style>
            .container {
              counter-reset: line;
            }
            .container .lineNum {
                display: block;
                line-height: 1.5rem;
            }

            .container .lineNum:before {
                counter-increment: line;
                content: counter(line);
                display: inline-block;
                margin-right: .5em;
            }
        </style>
    </head>
<body>
    <div class="container">
        <div id="1" class="lineNum"><right><span>line 1</span></right></div>
        <div id="2" class="lineNum"><right><span>line 2</span></right></div>
        <div id="3" class="lineNum"><right><span>line 3</span></right></div>
    </div>
</body>

</html>

＆＃13;

Answer 2

如果您要求列表自动使用<OL>标记其他方式是没有像这样添加deffrent标签

＆＃13;

div span {
    float: right;
}

＆＃13;

    <ol>
    <li> list </li>
    <li> list </li>
    <li> list </li>
    <li> list </li>
    </ol>
    
    
    
 <div id="1"><right>line <span>1</span></right></div>
<div id="2"><right>line <span>2</span></right></div>
<div id="3"><right>line <span>3</span></right></div>

＆＃13;

Answer 3

可能是一个小小的自动段落计数器。

$(document).ready(function() {
  var maxNum = 0;//how many lines should be prepared (Takin in considersation, there would be more wrappers) 
  $(".NumeredTextBlock").each(function() {//create counter for each .NumeredTextBlock wrapper
    var line = 1;//start with number 1
    $("p", this).each(function() {//look for paragraph elements inside wrapper
      $(this).addClass("line" + line);//add class with line number
      line++;
      if (maxNum < line) maxNum = line;//set the maximum number of lines used in HTML DOM for wrapper
    });
  });
  var prepStyle = "";//prepare css style with line numbering
  while (maxNum--) {//prepare as many styles as the max number in document
    prepStyle += ".line" + maxNum + ":before{content:'" + maxNum + "'}";
  }
  $("#numbers").html(prepStyle);//add prepared styles to the HTML DOM
  console.log("resulting generated <style id='numbers'>"+prepStyle+"</style>")
});

.NumeredTextBlock p {
  padding-left: 50px;
  position: relative;
}

.NumeredTextBlock p:before {
  display: block;
  position: absolute;
  left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="NumeredTextBlock">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
  <p>Lorem ipsum dol</p>
  <p>Lorem</p>
</div>
<style id="numbers"></style>

Answer 4

div {
  position: relative;
}

div>span:first-of-type {
  width: 120px;
  display: inline-block;
}

div>span:nth-of-type(2) {
  position: absolute;
  transform: translate(0, -50%);
  top: 50%;
}

td,
div {
  border-bottom: 1px solid;
}

td {
  vertical-align: middle;
}

<table>
  <tr>
    <td>Some str length<br/>Some str length</td>
    <td>105</td>
  </tr>
  <tr>
    <td>shorter</td>
    <td>102</td>
  </tr>
</table>

<br/>
<br/>

<div>
  <span>Some str length<br/>Some str length</span>
  <span>105</span>
</div>
<div>
  <span>shorter</span>
  <span>102</span>
</div>

将行号添加到现有HTML

4 个答案: