ASP.NET - 无法设置表单样式答案

【问题标题】：ASP.NET - cannot style formsASP.NET - 无法设置表单样式
【发布时间】：2020-12-25 03:25:39
【问题描述】：

我在将 CSS 应用于 <form> 元素和其中的所有嵌套元素时遇到问题。我通过样式表 header.css 中的 .header_navbar_form 和 .header_navbar_form_input 类来完成，但只有引导程序生效。由于某种原因，其他元素，例如<div>、<p>、<h1> 会受到相同样式表的影响再说一遍：id 为header_navbar_div 的div 受同一个样式表影响

cshtml:

<div id="header_navbar_div">

    <form class="header_navbar_form" action="/Home/Index">
        <input class="header_navbar_form_input" type="submit" value="Uvod">
    </form>
    <form class="header_navbar_form" action="/Home/Locations">
        <input class="header_navbar_form_input" type="submit" value="Lokality">
    </form>
     <form class="header_navbar_form" action="/Home/Trips"> 
         <input class="header_navbar_form_input" type="submit" value="Nase vandry">
    </form>
    <form class="header_navbar_form" action="/Home/Equipment">  
        <input class="header_navbar_form_input" type="submit" value="Vybava">
    </form>
    <form class="header_navbar_form" action="/Home/Recipes">  
        <input class="header_navbar_form_input" type="submit" value="Kucharka">
    </form>
    <form class="header_navbar_form" action="/Home/Tips">  
        <input class="header_navbar_form_input" type="submit" value="Navody a rady">
    </form>
    <form class="header_navbar_form" action="/Home/Nature">  
        <input class="header_navbar_form_input" type="submit" value="O Prirode">
    </form>
    <form class="header_navbar_form" action="/Home/Songbook">  
        <input class="header_navbar_form_input" type="submit" value="Zpevnik">
    </form>
    <form class="header_navbar_form" action="/Home/Partners">  
        <input class="header_navbar_form_input" type="submit" value="Partneri">
    </form>
</div>

CSS：

#header_navbar_div {
    padding-top: 2px;
    display: flex;
    justify-content: center;
}

.header_navbar_form {

    width: 50%;
    background-color: red;
}

.header_navbar_form_input {
    width: 11%;
    padding-bottom: 10px;
    padding-top: 10px;
    border-color: darkolivegreen;
    background-color: lightgoldenrodyellow;
    color: darkolivegreen;
    font-weight: bold;
}

【问题讨论】：

尝试将所有表单元素更改为 div。（Web 表单中只能有一个表单元素，不确定 cshtml。）此外，.header_navbar_form 的宽度为 50%，9 个元素具有 450% 的宽度。

标签： html css asp.net forms twitter-bootstrap

【解决方案1】：

我在 Edge 而不是 Firefox 中打开了应用程序并且 CSS 生效了，所以我清除了 Mozzila 的缓存并且它可以工作。有点菜鸟，但是，解决了这个问题。感谢您的努力。

杰克布

【讨论】：