如何有更小的按钮 css

Posted 2023-03-06

【中文标题】如何有更小的按钮 css

【英文标题】：how to have smaller buttons css

【发布时间】：2016-12-22 21:39:07

【问题描述】：

这是一个比 ionic2 更多的 css 问题。

我想使用 css 使所有按钮变小。这是一个Plunker 示例。如果可能的话，它可以响应吗？根据.ion-content调整大小

它基于segment-button

.segment-button 
    border-style: none;
    border-color: #e62100;
    color: #e62100;
    border-width: thin;
    font-size: 12px;

【参考方案1】：

在你的css中添加这个来覆盖：

.segment-button:not(:first-of-type) 
   max-width: 30px;
   line-height: 30px;
   height:30px;

【讨论】：

谢谢 :) @keith 是否可以在不调整容器大小的情况下做到这一点？按钮仍应填满页面宽度

【参考方案2】：

您只需要在style.css中更改代码的宽度和高度（以及最大宽度/最大高度，并调整行高），更改.segment-button: first-of-type，.segment-button:not(:first-of-type)，.segment-button:last-of-type， .md .segment-button.

类似这样的：

.md .segment-button 
  border-style: none;
  border-color: #e62100;
  color: #e62100;
  border-width: thin;
  font-size: 12px;


.segment-button:first-of-type 
  width: 40px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 40px;
  max-width: 40px;
  max-height: 40px;


.segment-button:not(:first-of-type) 
  width: 40px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 40px;
  max-width: 40px;
  max-height: 40px;


.segment-button:last-of-type 
  width: 40px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 40px;
  max-width: 40px;
  max-height: 40px;

【讨论】：

谢谢@Rafael RN 是否可以在不调整容器大小的情况下做到这一点？

@LeRoy 是的，给元素ion-segment添加样式并指定添加一个类，比如.days-segments

啊！ line-height 是我所缺少的。非常感谢！