Question

我正在尝试将一个html页面（已经有很多格式，链接到css文件，.js文件等）集成到asp.net

问题是html中使用的一些样式引用了一个表单元素，如下所示：

#Area form input[type="mytype"] {
    content: '';
    position: absolute;
    display: block;
}

当我尝试将其包装在asp.net页面中时，它会丢失格式化，因为我需要将所有内容都放在带有runat =“server”的asp.net“form”中。 Css感到困惑，因为它现在是表单内的表单和表单内的区域。

  <!DOCTYPE html>
<html>
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/all.css" rel="stylesheet">
    </head> 
<body>
<form method="post" action="uitest.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUxMTcwNzgxMGRk/FKLdutHp78brNcMIqdbHqG7TcPZ3FoZf+HMkhw=" />
</div>
    <div id="feature">

    <div  class="validate-form">
        <span class="icon"></span>

        <input class="required-email" type="email" placeholder="Email address">
        <button class="btn"><span>Apply now</span></button>
    </div>

    </div>
    </form>

</body>
</html>

最好的方法是什么？我可以将'form'重命名为Css中的其他内容吗？

谢谢

Answer 1

您不应该在Web窗体应用中使用嵌套表单。如果未应用CSS样式，则选择器不会正确定位元素，或者您选择的特性低于具有冲突样式的其他选择器。 runat=server与它无关，因为该属性实际上并未在页面上呈现。

现在，您的输入似乎有非法类型。根据你的选择器，你应该有一个类似的结构：

<div id="Area">
  ...
   <form>
     ...
     <input type="mytype" /> //ILLEGAL!!
   </form>
</div>

为什么有mytype输入？您应该只使用有效类型，例如text。更改它们，然后添加：

#Area form input[type="text"]{
     background-color:red !important; //This is just for testing, don't put into production!
}

如果您的输入没有红色背景，请调整为：

form input[type="text"]{
     background-color:red !important; //This is just for testing, don't put into production!
}

如果您仍然遇到问题，请实际粘贴您的源代码（单击浏览器中的View Source，而不是Visual Studio）。

<强>更新

为什么选择器中有#Area？标记中没有包含该ID的元素。这个选择器可以工作：

 form input[type="email"]{ ... }

Answer 2

假设您不需要能够与页面的代码隐藏文件中的输入元素进行交互，那么只需在页面中使用文字HTML控件即可完全接受＆＃39 ;标记。

假设您也可以调整CSS，可以从选择器中删除form，然后确保将所有内容复制到<div> ... </div> id="Area"属性。

<强> CSS：

#Area input[type="whatever"] {
    content: '';
    position: absolute;
    display: block;
}

<强> HTML：

<div id="Area">
  ...

  <!-- add markup here -->

  ...
</div>

Asp.net形式失去了CSS格式

2 个答案: