同样向内联块添加边框

2023-12-22

https://jsbin.com/dazugonoli/1/edit?html,css,输出 https://jsbin.com/dazugonoli/1/edit?html,css,output

你们如何为内联块 div 添加边框?想象一下我正在制作日历,边框似乎重复且在框的每一侧不相等。

#parent{
  width: 400px;
}
#parent > div{
  display: inline-block;
  width:50px;
  height:50px;
  line-height:50px;
  background:cyan;
  border:1px solid;
  text-align:center;
}
<div id="parent">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

最简单的解决方案是使用outline代替border

#parent > div{
    display: inline-block;
    width:50px;
    height:50px;
    line-height:50px;
    background:cyan;
    outline: 1px solid;
    text-align:center;
  }
<div id="parent"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  </div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

同样向内联块添加边框 的相关文章

  • 如何使用离线存储和 Knockout.js 实现 MVVM?

    我可以使用 Knockout js 实现 Mvvm 但我想将它与跨浏览器 FF 和 Chrome 支持的 Html 5 离线存储一起使用 我想将 html 对象绑定到离线存储 我没试过 但是有一个knockout localStorage
  • 布尔属性的CSS属性选择器可以写得更简洁吗?

    我读过那个 HTML 布尔属性 http www whatwg org specs web apps current work boolean attribute 例如readonly disabled required 等 可以为空或具有
  • 保持溢出:隐藏真正隐藏

    如果我有一个带有这种风格的 divoverflow hidden 我发现有时键盘操作会导致 div 滚动 而且由于没有滚动条 所以确实没有办法让div回到原来的状态 除了指定样式之外 我还应该做什么来防止这种情况发生 例如 当您选择L使用鼠
  • 如何在 css 中选择单选按钮?

    如何在 CSS 中选择单选按钮 我正在使用的 HTML 是生成的 因此我无法向其中添加类或其他属性 我在互联网上找到了 input type radio 但我不知道这是否是常规 CSS 并且大多数浏览器都支持 还有其他方法可以选择单选按钮吗
  • 缓存静态 HTML 站点

    我通常使用 WordPress 但刚刚为客户完成了一个项目 该项目是一个静态 HTML 页面 由 8 个页面和每页约 2 个图像组成 使用 WordPress 我会使用 w3 总缓存 cloudflare photon 或通过 wp 引擎的
  • 行高继承

    我无法更改在正文中定义的跨度元素行高 我尝试使用 important 以及不同的行高表示法 包括字体 行高 这是代码 body font 16px 1 5 Arial Helvetica sans serif pageBody oferta
  • 设置 Gatsby 博客分层 URL slug 结构

    我目前正在使用 Gatsby Starter 博客 https github com gatsbyjs gatsby starter blog https github com gatsbyjs gatsby starter blog 我可
  • 用户单击链接或菜单外部后,如何关闭此复选框菜单?

    我需要知道在用户单击链接或链接外部后如何关闭此菜单 我现在的猜测是 最好的方法是当用户单击链接或菜单背景区域之外时 使用 js 或 jquery 取消选中复选框 但我对 javascript 不太了解 所以我不知道如何这样做哈哈 代码 mo
  • 使用 PHP 自动将引用的 LESS 文件编译为 CSS

    我希望发生以下事情 让流程在服务器端自动化 只需能够像在代码中引用 CSS 文件一样引用 LESS 文件 用户将返回缩小的 CSS 而不是缓存的 LESS 文件 因此编译器不需要运行 除非 LESS 文件已更新 为了这个工作any在我的域内
  • 弹性列的自动宽度

    如何设置第一个 Flex 列的宽度 使其宽度仅为其内容的大小 http codepen io anon pen rrKkOW http codepen io anon pen rrKkOW div class flex div class
  • 从 mongoDB 获取数据并在 HTML 上显示

    我无法理解如何从 MongoDB 数据库获取数据并将其显示在 HTML 上 我已经设置了数据 这是 server js 文件 const path require path const express require express con
  • 仅扩展 Sass 的第一级

    我有几行 Sass content width 960px padding 15px 0 margin auto background inherit p text align justify padding 10px 在某些地方 我想用
  • 如何给antd Select设置自定义样式?

    我要定制antdSelect 当用户点击Select蚂蚁金服Option应该显示在 antd 上Select而不是显示在Select antd Select https ant design components select https
  • 如何更改 bootstrap 版本 4 按钮颜色

    我可以通过更改 bootstrap v4 中的主题颜色来更改主按钮颜色 但它也会影响所有其他组件 如何设置主按钮颜色而不影响主题颜色 我不想设置品牌为主并实现它 还有其他选择吗 Bootstrap 4 1 2019 年更新 现在 Boots
  • 是否可以在 Angular 6 中生成 QR 码并将其导出为 pdf,而不将其渲染为 html

    我想使用将 QR 码导出为 pdfjsPDF而不在 html 中显示它 我尝试了很多库 qrcode angularx qrcode 你可以使用ngx 二维码 https github com techiediaries ngx qrcod
  • 如何清理除图像网址之外的 html 字符串?

    我正在尝试清理 html 字符串 但我想将图像网址列入白名单 我的代码 ActionView Base full sanitizer sanitize phrase meaning tags w img attributes w src 这
  • 当子项位置固定时从 Bootstrap 容器继承宽度

    我试图让 header div 从其父级继承其宽度 标题 div 是position fixed 父级包含在引导容器内 但是 正如您在我创建的代码中看到的 它没有正确继承其父级的宽度 它从某处添加了一些额外的宽度 这一切都非常烦人 知道如何
  • jQuery - 检测元素是否在视口中

    我正在编写一个脚本 当不同的元素出现在屏幕上时 它会为它们提供一些动画 第一步是检测它们何时进入屏幕 但这似乎不起作用 我尝试过的 The visible 选择器 我很快发现这在 jQuery 中还有其他作用 不同的插件 但我发现它们做的事
  • Document.querySelector 返回 null,直到使用 DevTools 检查元素

    我正在尝试创建一个 Chrome 扩展程序 用于查找 Facebook 上的 赞助 帖子并将其删除 在执行此操作时 我注意到 Google Chrome 在 Facebook com 上的这种相当奇怪的行为 其中对现有元素的某些类型的查询
  • jQuery 轮播。如何仅显示下一个或上一个元素

    我有一个 jQuery 问题 我真的尝试了我所知道的一切 我对此很新手 所以 简而言之 问题是我正在做一个简单的轮播式效果 我正在使用这段代码 div showarea 是需要旋转 下一个 上一个 的 DIV 但我想一次只显示一个 div

随机推荐

  • Pytorch 中缺乏 L1 正则化的稀疏解决方案

    我正在尝试在简单神经网络的第一层 1 个隐藏层 上实现 L1 正则化 我查看了 StackOverflow 上的其他一些帖子 这些帖子使用 Pytorch 应用 l1 正则化来弄清楚应该如何完成 参考文献 在 PyTorch 中添加 L1
  • 使用 RSpec 进行改进的测试类

    假设我已经精炼了 module RefinedString refine String do def remove latin letters code code code code end end end 我在课堂演讲中使用它 class
  • 将所有“工作表对象”转换为 powerpoint 中的图像

    真的不知道把它放在哪个堆栈站点上 请随意将其移至正确的位置 我的问题与编程并不真正相关 但我有大量的幻灯片中嵌入了这些 工作表对象 的要点 有些似乎是来自 Excel 的图表以及来自 Visio 的其他图表类型项目 我需要将所有这些 工作表
  • Kivy 规则继承与 add_widget()

    跟进问题 Kivy 外部规则固有 https stackoverflow com questions 31618565 kivy outside rule inherence main py from kivy app import App
  • 为什么 Azure 不在我的两个实例之一上调度 HTTP 请求?

    我有一个带有两个实例的 Azure Web 角色 两个实例都 准备就绪 运行正常 在我的桌面上 同一程序的四个实例同时运行 并通过 HTTP 请求访问 Web 角色 URL 但根据日志 所有请求仅分派到实例 0 我需要将请求分派到两个实例以
  • C# 通用列表联合问题

    我正在尝试使用 Union 合并两个列表 以便消除重复项 以下是示例代码 public class SomeDetail public string SomeValue1 get set public string SomeValue2 g
  • ipython 笔记本中的居中对齐输出

    我想将我的输出 包括文本和绘图 居中对齐ipython notebook 有没有一种方法可以在同一个笔记本中添加样式 代码或屏幕截图示例会有很大帮助 尝试在代码单元中运行此命令以覆盖输出单元的默认 CSS from IPython disp
  • SharePoint 2010:RemoveFieldRef 和 Inherits="TRUE"

    我创建了一个继承自 OOTB SharePoint 的自定义内容类型Picture内容类型 我所做的唯一自定义是添加一个简单的 URL 字段 并删除基本类型上的两个字段 见下文
  • 如何根据编译器类型在 C 编译器的 SConstruct 中设置选项?

    我需要为 C 编译器设置附加选项 例如添加标志以打开所有警告 具体取决于编译器的类型 例如 对于 MSVC 我应该使用 env Append CPPFLAGS Wall 但对于 mingw gcc 我需要使用 env Append CCFL
  • Symfony2 异常响应。将 404 状态代码替换为 200

    我在 symfony2 中有一个 404 处理程序 它是一个 EventListener 对于某些 404 我会进行重定向 效果很好 对于浏览器来说 不会抛出 404 错误 new RedirectResponse newURL 该行基本上
  • 向下滚动到部分时突出显示菜单项

    我知道这个问题在这个论坛上已经被问了一百万次 但没有一篇文章帮助我找到解决方案 我编写了一小段 jquery 代码 当您向下滚动到与哈希链接中 具有相同 id 的部分时 它会突出显示哈希链接 window scroll function v
  • 通过重复数字打印所有排列的算法

    我已经成功设计了打印所有重复数字的排列的算法 但我设计的算法有一个缺陷 仅当字符串的字符唯一时它才有效 有人可以帮我扩展算法 以应对字符串的字符可能不唯一的情况 到目前为止我的代码 include
  • Passport JS successRedirect 在 Node.js 中挂起

    我正在使用护照local signup并可以通过表单创建用户并使页面成功重定向到我指定的页面 我目前的问题是 重定向后页面就会挂起 我看到其他人也有类似的经历 但看看我所拥有的 我无法弄清楚为什么我的例子挂了 我首先对表单进行一些简单的验证
  • AuditException:由于非活动事务而无法创建修订

    我一直在更新应用程序上的框架 现在我正在尝试使用 JPA 配置 hibernate envers 来审核某些域 常规持久性工作正常 但审核失败并出现以下错误 我有这个错误 org springframework orm hibernate4
  • PowerShell:ForEach-Object 与 InputObject 的意义是什么?

    The ForEach 对象的文档 https learn microsoft com en us powershell module microsoft powershell core ForEach Object说 当你使用InputO
  • R,获取城市的经度/纬度数据并将其添加到我的数据框中[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我想获取数据框中城市的经度 纬度数据 并在我的框架中添加 2 列 我是 R 新手 不知道该怎么做 有人可以帮我解决这个问题吗 我的框架 g
  • NLP 对句子内容进行分类/标记(需要 Ruby 绑定)

    我正在分析几百万封电子邮件 我的目标是能够将其分组 团体可以是例如 交货问题 发货缓慢 发货前处理缓慢 库存信息不正确等 客户服务问题 电子邮件回复速度慢 回复不礼貌等 退货问题 退货请求处理缓慢 客户服务缺乏帮助等 定价投诉 发现隐藏费用
  • Azure 身份验证令牌 - AADSTS500113:没有为应用程序注册回复地址

    我正在尝试使用以下教程通过邮递员获取令牌 https learn microsoft com en us azure healthcare apis access fhir postman tutorial https learn micr
  • 为什么 Perl v5.22 没有找到所有句子边界?

    这是在 Perl 5 22 1 中修复的 我写在Perl v5 22 添加了奇特的 Unicode 字边界 http www effectiveperlprogramming com 2016 06 perl v5 22 adds fanc
  • 同样向内联块添加边框

    https jsbin com dazugonoli 1 edit html css 输出 https jsbin com dazugonoli 1 edit html css output 你们如何为内联块 div 添加边框 想象一下我正