Html CSS 圆角边框在边框和内容之间留下空隙

发布于06月01日

我想要有圆形边框的标签，边框和内容之间有一个奇怪的间隙.有人能帮我把它处理掉吗？

Sandbox 链接:https://codesandbox.io/s/borders-on-tabs-95cwzp?file=/index.html

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  zoom: 2; /* just to see it better */
}

ul {
  list-style: none;
  display: flex;
  display: flex;
  list-style: none;
  border: 1px solid #133275;
  border-radius: 16px;
  background-color: #9db4d6;
  overflow: hidden;

  /* To reset browser native styles  */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li {
  padding: 6px 12px;
  font-size: 20px;
  border-radius: 16px;
}

li.active {
  background-color: #133275;
  color: white;
}

<html>
  <body>
    <div class="container">
      <ul>
        <li class="active">First tab</Item>
        <li>Second tab</Item>
      </ul>
    </div>
  </body>
</html>

一个类似的问题:Gap between background (or children) and rounded border

body { font-family: sans-serif; } .container { display: flex; justify-content: center; zoom: 2; /* just to see it better */ } ul { list-style: none; display: flex; display: flex; list-style: none; box-shadow: 0 0 0 1px #133275; /* added this */ /* border: 1px solid #133275; Removed this */ border-radius: 17px; /* Adjusted from 16 to 17*/ background-color: #9db4d6; /* overflow: hidden; Removed this*/ /* To reset browser native styles */ margin: 0; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; } li { padding: 6px 12px; font-size: 20px; border-radius: 16px; } li.active { background-color: #133275; color: white; }

Html CSS 圆角边框在边框和内容之间留下空隙

推荐答案

Html相关问答推荐

XPATH text()函数遇到困难

Chrome中是否有一个本地显示密码功能，用于`input type = password/`？""<"">

如何获得一个背景图像，不是模糊的内部容器，但模糊的外部'

如何修复与导航栏重叠的css网格？

页脚与主要内容重叠

嵌套表列高度不是100%高度的问题

风格规则应该适用于响应图像的哪些方面？哪种规则适用于<；图片和gt；，哪种规则适用于<；img>；？

SVG动画只有在打开S开发工具的浏览器时才开始播放

如何在HTML中适当地为单选按钮网格添加标签？

使用bash从html表格中提取表格

如何制作'；在第'；页中搜索；是否发现多个元素中的单词？

如何防止滑动滚动元素时touch 屏出现空白区域？

当底部进入视图时从底部粘性定位

如何垂直对齐列表中的图像和文本？

导航丸被选中(活动)，但内容未显示.怎么会？

如何在Bootstrap卡片底部添加波浪形状

Primeng浮动标签溢出管理

是否可以设置用户在联系表单中输入的文本字体的样式

svg 内容超过元素

我可以将两个元素之间的所有空间都放在弹性框或网格中吗？