代码之家 › 专栏 › 技术社区 › Frank N dqthe

按钮具有不同的基线行为

html5 css

Frank N dqthe · 技术社区 · 6 年前

这是很好的开始,但是只要给出一个明确的宽度和高度, <button> 我是否缺少一个css属性来平衡?

vertical-align 道具看起来像一个解决方案。。。只要我没有明确的身高……)

main>* {
  font-size: inherit;
  font-family: sans-serif;
  color: inherit;
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
  text-decoration: none;
  border: none;
  background: rgba(blue, .1);
  padding: 0;
  margin: 0 .1em;
  width: 60px;
  height: 100px;
  overflow: hidden;
  vertical-align: bottom
}

<main>
  <button>button</button>
  <a href='#'>anchor</a>
  <a>plain</a>
  <button>button</button>
  <span>span</span>
  <button>button</button>
</main>

â CodePen

1 回复 | 直到 6 年前

Frank N dqthe 6 年前

Temani指向 this elaborate analysis 是个不错的选择。

好吧,有一个解决办法,看起来:

如果我不去定义 height ,并将所需高度放入 line-height 相反
并设置 vertical-align: middle 除了按钮)

    overflow: hidden      
    width: 60px
    vertical-align: middle // button won't care, but everyone else
    line-height: 100px

我明白,我想要什么 (也就是准确的高度btw,不加上其他一些基值)

推荐文章

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

5 月前

Mass · 如何在Tailwind CSS v4中创建配置

5 月前

magenta placenta · 将css变量合并为一个变量

5 月前

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

5 月前

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

5 月前

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

6 月前

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

6 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

按钮具有不同的基线行为

â CodePen

â CodePen