jjzjj

html - 如何正确标记/设置有序列表的样式以补偿大元素编号

coder 2023-08-12 原文

我正在动态生成一个包含有序列表的网页。该页面包含 10 个元素，并使用属性“开始”对元素进行相应编号。具有“list-style-position: outside”的通用有序列表非常适合元素编号小于 1000 的元素。

当元素编号长度为 4 位或更多位时，部分元素编号被容器边框部分遮挡时会出现问题。调整列表填充并不是一个真正的解决方案，因为它仍然会破坏位数大于调整填充以处理的位数的元素计数，并且由于过多的填充会使个位数元素看起来很糟糕。

使用 'list-style-position: inside' 解决了元素编号被遮挡的问题，但引入了一个新问题，因为这样做会导致元素内容包裹在列表元素编号下方，而不是对齐到数。

我总是可以隐藏元素编号并在每个

  • 中引入一个新的 float div 并将内容设置为列表元素编号，但是虽然这解决了我的演示问题，但在语义上它不太正确，因为我正在添加标记和内容纯粹出于展示原因。

    有没有我不知道的解决这个难题的 css 解决方案？

        <style>
        #container {
            border: solid;
        }

        #container div, #container h1 {
            border: solid 1px blue;
        }

        #outsideOl {
            list-style-position: outside;
        }

        #insideOl {
            list-style-position: inside;
            padding-left: 0;
        }

    </style>



    <div id="container">

    <ol id="outsideOl" start="3000">
        <li><h1>one</h1><div>the content inside the &lt;li&gt; is aligned to the right of the numbers, which is what I want, but long numbers are obscured by the container's border.  The list elements are shifted to the right by the default padding for an &lt;ol&gt; element.  If the list item number happens to be longer than the padding, part of the number is obscured.</div></li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
    </ol>

    <hr/>

    <ol id="insideOl" start="3007">
        <li><h1>one</h1><div>long numbers affect content flow and as such are left aligned to the container border (which is good because they are no longer obscured). The problmen now is the block content inside the li gets bumped down to the next line, and left aligns with the numbers. Curse you css!</div></li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
    </ol>

    </div>

    • 最佳答案

    您想要的行为是什么？您可以设置溢出的可见性，以便非常大的数字突出到边距中。如果您希望数字列的宽度实际根据列表项的数量而改变，您将需要使用 JS。很遗憾，但它应该只有一行(类似于 $('ul').each(function(el, index){el.css('padding-left',(Math.floor(Math.log (el.childNodes.length)/Math.LN10)+1)+'em');});)

    关于html - 如何正确标记/设置有序列表的样式以补偿大元素编号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3442856/

    有序htmlgtltlicsssemantic-markup

    有关html - 如何正确标记/设置有序列表的样式以补偿大元素编号的更多相关文章

    1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

      我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

    2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

      总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

    3. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

      我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

    4. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

      关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

    5. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

      给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

    6. ruby-openid:执行发现时未设置@socket - 2

      我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

    7. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

      我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

    8. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    9. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

      我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

    10. ruby - 如何指定 Rack 处理程序 - 2

      Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

    随机推荐