代码之家 › 专栏 › 技术社区 › webta.st.ic

使用一些像素从左到右推边框底部

border css html

webta.st.ic · 技术社区 · 7 年前

我想知道,是否有可能 border-bottom 有点像 padding-left 和 padding-right . 我有两个分区,有一些边界。我想 边框底部 最顶尖的歌手 padding 在左侧和右侧。我不知道这是否可能。我知道它的结构很奇怪(我可以很容易地在整个包装盒周围使用边框,然后用 边框底部 实现这一点)。问题是,我正在使用一个插件,它的结构是这样的,我必须像这样对它进行自定义,因为确实存在这种结构和样式。希望足够清楚。下面是它的外观图片和示例片段:

.box {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.box__top {
  border: 1px solid black;
  border-bottom: 1px solid red;
  height: 20px;
  padding: 10px;
  text-align: center;
}

.box__bottom {
  border: 1px solid black;
  border-top: none;
  height: 150px;
  padding: 10px;
  text-align: center;
}

<div class="box">
  <div class="box__top">
    <span>I'm the top section</span>
  </div>
  <div class="box__bottom">
    <span>I'm the top section</span>
  </div>
</div>

1 回复 | 直到 7 年前

Paulie_D 7 年前

改用伪元素:

.box {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.box__top {
  border: 1px solid black;
  border-bottom: none;
  position: relative;
  height: 20px;
  padding: 10px;
  text-align: center;
}

.box__top::after {
  content: " ";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 90%;
  height: 1px;
  background-color: red;
}

.box__bottom {
  border: 1px solid black;
  border-top: none;
  height: 150px;
  padding: 10px;
  text-align: center;
}

<div class="box">
  <div class="box__top">
    <span>I'm the top section</span>
  </div>
  <div class="box__bottom">
    <span>I'm the top section</span>
  </div>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前