首页 > 解决方案 > ASP.NET - 无法设置表单样式

问题描述

我在将 CSS 应用于<form>元素和里面的所有嵌套元素时遇到问题。我通过样式表 header.css 中的 .header_navbar_form 和 .header_navbar_form_input 类执行此操作,但只有引导程序生效。由于某种原因,其他元素,例如<div>, <p><h1>会受到同一个样式表的影响 再一次:带 idheader_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;
}

标签: htmlcssasp.netformstwitter-bootstrap

解决方案


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

杰克布


推荐阅读