CSS:
dt/dd 对之间有间距/边距

2024-02-05

我有以下 html:

<dl>
        <dt>Item 1</dt>
        <dd>
            <ul>
                <li>Value 1</li>
            </ul>
        </dd>
        <dt>Item 2</dt>
        <dd>
            <!-- this item is missing a value -->
        </dd>
        <dt>Item 3</dt>
        <dd>
            <ul>
                <li>Value 1</li>
                <li>Value 2</li>
                <li>Value 3</li>
            </ul>
        </dd>
    </dl>

我想将其布局如下(而不是正常的 dl,它将术语和定义放在一起):

Item 1    Value 1
Item 2    
Item 3    Value 1
          Value 2
          Value 3

这不是问题。问题是我想在每个术语/定义对之间添加空白。问题是定义的高度不同(它们的范围在 0 到 5 个列表项之间),因此我无法在 dd 标签上应用相同的边距。


这个怎么样?

dt, dd { display: block; float: left; margin-top: 20px; }
dt { clear: both; }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS:
dt/dd 对之间有间距/边距 的相关文章

  • 使图像宽度为父 div 的 100%,但不大于其自身宽度

    我试图让图像 动态放置 对尺寸没有限制 与其父 div 一样宽 但前提是该宽度不比 100 时其自身宽度宽 我已经尝试过这个 但没有成功 img width 100 height auto max width 100 其中许多图像比它们的父
  • Firefox 无法正确渲染:border-radius、box-shadow 和 border

    在下面的例子中 http jsfiddle net Du8f6 3 http jsfiddle net Du8f6 3 我将内部阴影设置为容器和 10px 边框 并将边框半径设置为 50 结果是容器边框外有奇怪的细白色边框 细白色边框在以下
  • 如何在图像上叠加徽标?使用CSS

    正如您所看到的 徽标显示在背景图像上方 但我希望它位于背景图像的中心 这是我的标题 背景需要从页面顶部开始并在菜单之前结束 徽标需要显示在背景图像的中央 我已经尝试了很多 但也许有人遇到了类似的问题 可以帮助我解决这个问题 这张图片显示它几
  • 在生产中使用 css / javascript 源映射对性能有何影响?

    生产环境中应该使用源映射吗 除了调试之外 它们还有什么好处吗 由于额外的服务器往返 它们是否会影响应用程序加载时间 浏览器是否足够智能来加载 map应用程序加载和渲染后的资产 如果浏览器找不到 map asset 404错误 会对性能产生影
  • Tailwind CSS:“outline”类不存在。但这不是自定义样式,而是框架类

    在一个新项目中 我得到了奇怪的行为 除了大纲和相关内容之外 一切都按预期进行 https tailwindcss com docs outline style https tailwindcss com docs outline style
  • 内部样式表中的 HTML 注释标签[重复]

    这个问题在这里已经有答案了 可能的重复 注释掉 HTML 文档中的样式表以支持旧版浏览器 https stackoverflow com questions 6825773 commenting out stylesheets in htm
  • 为什么 Firefox 对 Helvetica 的处理方式与 Chrome 不同?

    Firefox 和 Mac 版 Chrome 中以 Helvetica 呈现的文本的垂直位置及其内容区域的大小有所不同 例如 在 Chrome 中 如果行高与字体大小相同 则下行部分将被剪裁 我调整了图中块元素的位置 保持基线一致 以说明大
  • javascript初学者:在javascript中添加动态样式? [复制]

    这个问题在这里已经有答案了 可能的重复 如何使用 Javascript 创建 标签 https stackoverflow com questions 524696 how to create a style tag with javasc
  • CSS 属性选择器中的 [att~=val] 与 [att*=val] 有何不同?

    也许我错过了一些东西 但它们看起来很相似 例如 如果您使用 a alt thumb or a alt thumb 我可以通过哪些不同方式缩小选择范围 我的理解是 为您提供了引号中的部分匹配 而 为您提供了部分匹配 我将稍微修改一下代码 但由
  • AJAX 加载的图像在 Safari 中无法正确显示

    因此 我使用 AJAX 加载每个页面的内容并将其注入当前页面 在 Chrome Firefox Internet Explorer 上一切都运行良好 尽其所能 哈哈 并且除了两个奇怪的部分之外 内容在 Safari 上加载良好 通过 AJA
  • 如何将 ng-repeat 分成批次

    我正在做这个 ref checkbox 示例http getbootstrap com javascript buttons examples http getbootstrap com javascript buttons example
  • 检测滚动条是否可见(例如在移动设备上)

    我见过很多关于检测 HTML 元素是否可滚动的问题 答案 例如动态检测滚动条 https stackoverflow com questions 33805052 detect scrollbar dynamically 我需要类似的东西
  • 生成基于内联 HTML 样式的样式表?

    一段时间以来 我一直致力于对网站的不同部分进行样式设计 但是我尚未将内联样式放入样式表中 我想知道是否存在一个工具可以解析 HTML 文件并从中生成样式表 例如 这是我网站的一个片段 div class block style border
  • 使用 Flexbox 时 Apex 图表无法正确调整大小

    最近 我将 Floats 更改为 FlexBox 以便更轻松地使用面板 正如我在其他问题上所建议的那样 虽然大多数事情都按我的预期工作 但更改后我在使用 Apex Charts 时遇到了问题 完整代码在这里 https github com
  • 两个单独表格上的 Td 高度

    我有两个单独的表 我在每个 tr 上使用焦点 悬停函数 该函数同时在两个表上都很好用 我的问题是 td 高度 因为如果第一个表中 td 的描述更大 将显示在中的两行上相同的td和td的高度将被修改 但仅限于第一个表td 如何记住第一个表中
  • Sitecore 多种 RTE 类样式

    我可以为 RichTextEditor RTE 添加 CSS 样式路径 如下所示 并且我可以在 RTE 中选择定义的样式
  • BEM 与 SASS 和 :hover

    使用 BEM 和 SASS 声明活动 焦点 悬停状态的正确方法是什么 例如 我有这样的结构 div class card img class card image src alt div class card overlay div cla
  • Bootstrap“navbar-brand”导致“navbar-nav”项目从导航栏中的中心位置向右移动?

    我正在尝试创建一个导航栏 其左侧有 品牌 LOGO 而实际的导航项目位于整个栏的中心 我正在使用默认的 Bootstrap 导航栏 因为我一周前才开始学习 Web 开发 到目前为止 情况是这样的 但是 您可以看到导航项稍微移动到页面实际中心
  • CSS 列不会水平对齐

    我正在使用列计数来允许我的文本流入两个不同的列 但第一列的顶部 最左边 低于另一列 col moz column count 2 webkit column count 2 column count 2 div h3 Options h3
  • 页脚没有停留在底部

    这似乎是有史以来最令人困惑的问题 至少对我来说是这样 知道这个页面 除了标题之外 都已损坏 我复制了 HTML 并尝试小心地删除 WordPress 相关的爵士乐 以便您获得该页面的 html JsBin直播页面 http jsbin co

随机推荐

  • 计算输入字符 - 使用 onkeyup 还是 onkeydown?

    我需要为用户设置最大字符输入 类似于 stackoverflow com 的工作方式 我计划使用 javascript 向用户提供反馈并计算字符数 仅允许提交不超过最大字符数的内容 我不打算使用 xhtml 输入属性来限制此数量 因为只要不
  • C# 中带有圆角边框的表单? [复制]

    这个问题在这里已经有答案了 我使用此代码使表单没有边框样式 this FormBorderStyle FormBorderStyle None 我需要在表格上制作圆角边缘 有简单的方法吗 我该怎么做 看看这个 http msdn micro
  • 水豚 & RSpec

    我无法让水豚成功工作 它抱怨说has text是一个未定义的方法 我创建了一个新的 Rails 3 1 项目 rails new test T Gemfile source http rubygems org gem rails 3 1 3
  • 从 Java 调用 PLSQL 过程

    下面是我的Java程序 我正在调用 PLSQL 过程来更新员工姓名 我关闭了 PLSQL 代码中的提交 以便可以从 Java 代码进行提交和回滚 但即使在我关闭自动提交并执行显式回滚之后 表中的详细信息仍然会更新 如何 我不知道 请帮忙 这
  • 我可以在没有特定 NSManagedObjectContext 的情况下创建 NSManagedObject 实例吗?

    我正在构建一个应用程序 它从 Web API 接收大量列表 并允许用户保存一些列表以供离线查看 我通常的做法是 从API获取数据 并为每个数据创建一个新的Listing对象 如果用户选择将对象保存到数据库中 但这是一个核心数据应用程序 因此
  • java中零的情况下的负号

    有没有办法在结果返回零时截断负号 使用十进制格式时 DecimalFormat df new DecimalFormat 0 0 df setRoundingMode RoundingMode HALF UP formattedValue
  • 如何使用 Django 将 HTML 页面转换为 PDF

    我有一个 Django 网络应用程序 它是一个存储账单和发票的平台 现在我正在尝试将这些账单导出为 PDF 格式 我正在使用 xhtml2pdf 但它不起作用 我正在使用此代码进行测试 http obroll com generate pd
  • 如何以编程方式禁用Android中的相机功能

    我想实用地禁用我的 Android 应用程序中的相机 在这里 我想制作一个应用程序 一旦我启动应用程序 启动和停止中有两个按钮 当我单击开始按钮时 我的应用程序将转到主屏幕 并且即使单击我的应用程序中的相机图标不会启用 并且也不会单击硬件按
  • 如何判断一个容器是否无限递归并找到其最小的唯一容器?

    我正在读书展平 不规则的 列表列表 https stackoverflow com questions 2158395 flatten an irregular list of lists in python并决定将其作为 Python 练
  • 按类型获取控件的所有子控件的列表

    我试图创建一个方法来创建一个列表 其中包含 DetalsView 的所有字符串类型的子控件的名称 我得到的最接近的是 foreach Control c in dv Controls if c is Label controlsToChec
  • 在极坐标中转换字符串时如何处理夏季和冬季的时间戳

    我正在尝试将字符串时间戳从我的相机放入原始文件元数据的时间戳转换为极地日期时间 但是当我同时拥有夏季和冬季时间的时间戳时 极地会抛出此错误 ComputeError Different timezones found during strp
  • 将方程渲染为图像,并使用 R Markdown 将其包含在 Word/PowerPoint 输出文档中

    我无偿地交叉发布这个来自 R Studio 社区页面 https community rstudio com t rendering equations as images for microsoft output 13862因为这有点深奥
  • jQuery 无限滚动的替代方案

    有没有 jQuery 无限滚动插件的替代品 http www beyondcoding com 2009 01 15 release jquery plugin endless scroll http www beyondcoding co
  • Codedeploy 应用程序启动卡在挂起的使用节点上

    您好 我是使用 Code Deploy 的新手 我正在尝试启动节点应用程序 我的根目录中有 setup sh start sh 和 app js 这是我的 appspec yml 文件 version 0 0 os linux files
  • 依赖属性和数据绑定?

    In WPF 有人可以解释一下 DependencyProperty 和数据绑定之间的关系吗 我的代码中有一个属性 我想成为数据绑定的来源 如果我想将此对象绑定到 XAML 上的文本框 那么 DependencyProperty 或它 何时
  • Python 中的类型和类

    我对 Python 中的类型和类有点困惑 例如以下 REPL 对话让我感到困惑 gt gt gt class A pass gt gt gt a A gt gt gt type a
  • Tensorflow 运算速度极其缓慢

    我正在尝试使用 python 接口开始使用张量流 我的问题是 即使执行最基本的操作 也会花费很长时间 gt 5 分钟 使用从 macports 安装的 python3 6 和使用 pip 安装的tensorflow 1 13 tf nigh
  • 如何查找哪个表列对应于 Firebird 数据库中的约束?

    我有一个旧版 Firebird 版本 2 5 2 数据库 并使用 FlameRobin 版本 0 0 2 1851 来检查它 我已在 RDB RELATION CONSTRAINTS 表上运行以下查询来搜索名为 INTEG 172 的约束
  • 尝试在 Matlab 中使用发布时陷入无限循环

    Question 1 y dtmfsig 150006260 a t linspace 0 0 9 7200 plot t y title DTMF time signal xlabel t sec ylabel y t Part B fL
  • CSS:
    dt/dd 对之间有间距/边距

    我有以下 html dl dt Item 1 dt dd ul li Value 1 li ul dd dt Item 2 dt dd dd dt Item 3 dt dd ul li Value 1 li li Value 2 li ul