0

在过去的几个月里，我有一个项目一直在做。直到今天一切都运行良好。当我来的时候，我注意到我所有的按钮大小都是一样的。我喜欢使用 Chrome 中的开发人员工具来帮助调试我的网站，以及当我查看按钮显示不正确的原因时；似乎没有什么不对劲。那么请你帮我确定发生了什么以及我应该如何解决它？

这是 .aspx 代码：

<div class="row section text-center">
    <h2><%: Page.Title %> Page</h2><br />
    <asp:Button ID="stReturnButton" runat="server" CssClass="stButton-lg" Text="Back to Training Portal" PostBackUrl="~/SST/SafetyTrainingPortal.aspx" />
    <hr />
</div>

<div class="row col-xs-12 text-center">
    <div class="col-xs-6 text-center">
        <asp:Button ID="btnEditUpdate" runat="server" Text="Update Employee Certificates" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateCertificates.aspx"/>
    </div>
    <div class="col-xs-6 text-center">
        <asp:Button ID="btnAddCerts" runat="server" Text="Update Employee Profile" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateEmployeeProfile.aspx" />
    </div>

这是页面现在的样子： 在此处输入图像描述

这是按钮的 CSS：

    .stButton {
    width: 190px;
    opacity: 1.0;
    color: #0e4676;
    background-color: #9FCF6E;
    border-color: #357ebd;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    box-shadow: #063156 3px 3px;
    cursor: pointer;
    user-select: none;
    text-align:center;
}
.stButton-lg {
    width: 325px !important;
    opacity: 1.0;
    color: #0e4676;
    background-color: #9FCF6E;
    border-color: #357ebd;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    box-shadow: #063156 3px 3px;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

正如你所看到的，我有一个普通按钮的 CSS 和一个更大的按钮的 CSS。较大的按钮是我在 .aspx 代码中的目标。我在宽度末尾包含“！important”，因为按钮显示不正确；只是想看看这是否有帮助......显然它没有。我也尝试过内联样式，但这也不起作用。重要的一点是，我在以下浏览器中查看过该页面：IE、Chrome 和 Edge。

无论如何，这里是母版页中的链接，其中包含项目文件夹结构中文件的视图： 在此处输入图像描述 我注释掉了 Script.Render 的占位符，因为我在占位符的正上方声明了链接。此外，不加注释对我也没有任何作用。

我想我已经涵盖了所有内容，所以如果我错过了什么，请告诉我，我会包括在内。我感谢提供的所有帮助。

4

1 回答 1

0

谢谢您的帮助。但是，我找到了答案，希望这对其他人有所帮助。问题是另一个经验不足的团队成员在 CSS 中将输入控件的宽度更改为 Max-Width: 150px（上图中未显示）。那件小事几乎贯穿了我一整天，但至少它被找到并纠正了。

感谢那些帮助或评论的人。

于 2018-04-05T23:24:28.870 回答