如何减小按钮大小？
如何减小按钮大小？
提问于 2020-04-23 05:49:26
我使用的是<>塞拉利昂主题。一切都很好，但除了月食中的按钮大小。
看到那个图像了吗？所有按钮的高度都大于文本框。显然看起来不太好，所以我想降低这些按钮的高度。因此，我尝试编辑gtk.css文件：
button {
min-height: 20px; /* ********** I have changed this value only, nothing else ********** */
min-width: 16px;
transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 1px solid;
border-radius: 5px;
padding: 0 6px;
color: #242424;
border-color: rgba(0, 0, 0, 0.12);
background-color: white;
box-shadow: 0px 1px 1px 0px rgba(16, 16, 16, 0.04), 0px 1px 2px 0px rgba(16, 16, 16, 0.01), inset 0 0 0 1px rgba(0, 0, 0, 0.01);
}但我无法使按钮的高度与文本框的高度相等。
无论我如何减少min高度的值，按钮仍然比文本框大。
那么，如何将按钮的高度降低为文本框的高度？我应该编辑另一行gtk.css吗？(我只需要编辑按钮，没有其他)
谢谢:D
回答 1
Ask Ubuntu用户
发布于 2020-04-23 08:10:20
对于一个有类似问题的用户，看看这个GitHub页面，这个答案的其余部分将引用该消息来源。
他们给出的示例基本代码如下
button {
min-height: 22px;
min-width: 24px;
@include button(shade($bg_color, 1.2), $fg_color);
.inline-toolbar &,
.linked > & { @include linked_button(shade($bg_color, 1.2)); }
.linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); }
&.circular { // FIXME: aggregate to buttons
border-radius: 20px;
-gtk-outline-radius: 20px;
label { padding: 0; }
}
}请注意前面的两行：min-height和min-width，您说到目前为止，您只更改了高度，但是，如果主题中启用了将按钮锁定到一定比例的选项(通常是为了防止文本包装)，则需要同时更改高度和宽度才能看到效果：
button {
min-height: 11px;
min-width: 12px;
@include button(shade($bg_color, 1.2), $fg_color);
.inline-toolbar &,
.linked > & { @include linked_button(shade($bg_color, 1.2)); }
.linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); }
&.circular { // FIXME: aggregate to buttons
border-radius: 20px;
-gtk-outline-radius: 20px;
label { padding: 0; }
}
}页面上还有几条评论；
将最小高度宽度设置在16 the以下应该可以解决这个问题。但这需要反复尝试。
尝试使用最小高度/宽度= 16/14或14/12，然后尝试优化。一切都应该按比例变化。
页面本身的变化表明，这是一个从来没有真正解决过的问题，还有更多的解决方法。希望这能有所帮助。
页面原文内容由Ask Ubuntu提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://askubuntu.com/questions/1229657
复制相关文章
相似问题
腾讯云开发者
