Question

我有几个QPushButton位于彼此旁边。每个按钮的左侧和右侧都有 8px 的填充。当其中一个人有焦点时，我会改变背景颜色。到目前为止它看起来很好：

除了背景颜色变化，我想在白色中应用2px的边框。当我这样做时，文字似乎被边界的大小切断了。所以边界为2px，它看起来像这样：

当我将border-size增加到例如4px时，我的文本会完全消失，因为按钮不会正确地增加它的大小。

我在Qt中使用以下CSS：

QPushButton {
    background-color: transparent;
    border-style: none;
    font: bold 12px;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
}

QPushButton:focus {
    background-color: blue;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}

编辑，Rushi的解决方案： 我们的想法是使用透明颜色定义原始（非聚焦）按钮的边框。当它获得焦点时，按钮的宽度似乎正确计算。我不知道为什么Qt在这种情况下会正确计算它，但它适用于我： - ）

带有修复的CSS：

QPushButton {
    background-color: transparent;

    /* we define our border here but with transparent color */
    border-style: solid;
    border-width: 2px;
    border-color: transparent;

    font: bold 12px;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
}

QPushButton:focus {
    background-color: blue;
    border-color: white;
}

Answer 1

Hello Please check below html and css code ,it will be help you to solved this issue.

<html>
    <head>
        <title>title</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .box{ background: #000; width: 400px; height: 100px; margin: 50px;  padding: 50px;}
            .QPushButton {
    background-color: transparent;
    font: bold 12px;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
     border-style: solid;
    border-width: 2px;
    border-color: transparent;

}

.QPushButton:focus {
    background-color: blue;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}
        </style>
    </head>
    <body>
        <div class="box">
            <a href="#" class="QPushButton">3</a>
            <a href="#" class="QPushButton">4</a>
        </div>
    </body>
</html>

Answer 2

您应该减小填充的大小。这是诀窍：

QPushButton:focus {
    ....other styles.....
    border-width: 2px;
    padding-left: 6px;
    padding-right: 6px;
}

Qt CSS边框+填充似乎切断了文本

2 个答案: