微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

当屏幕尺寸变小时如何使按钮不调整宽度?

如何解决当屏幕尺寸变小时如何使按钮不调整宽度?

当屏幕尺寸变小时,我希望按钮不改变其宽度尺寸。我应该怎么做才能保持 Add admin 按钮的形状不变?

按钮的形状是这样的: My buttons

我希望形状保持这样: Desired result

这是我的 CSS 代码

.button {
    background-color: black;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    padding: 10px 25px;

解决方法

您根本不需要加宽按钮 只需控制文本,使其在不同设备上不会断线

.button { 
    ...
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis
}
,

添加white-space: nowrap;

.button {
    background-color: black;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    padding: 10px 25px;
    white-space: nowrap;
}
,
{

min-width: (desired value) px!important;
max-width: (desired value) px!important;
}

放置一个静态值应该可以工作:) 如果您希望在所有设备中都使用相同的值 :)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。