如何使用更小的按钮css

Question

这是一个比ionic2更复杂的问题。

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

​

​

基于segment-button的智能交通系统

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

Answer 1

您只需在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;
}

Answer 2

将此内容添加到css中以覆盖：

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