【问题标题】:Making a form fixed固定表格
【发布时间】:2013-09-13 06:46:41
【问题描述】:

我正在尝试使用“欢迎”和以下表单创建一个固定的标题(实际上它只是表单的开头)。欢迎保持不变,因为 CSS 样式页面告诉所有标题保持不变。但是我的程序不允许我将部分表单放在标题中。我想不出让表单的这一部分也保持固定。

<h1>Welcome</h1>


 <form action="website.php" method="POST">
      <strong>Name:</strong>
        <input type="text" name="user"/>
         <strong>Gender<FONT COLOR="#FF0000">*</FONT></strong>
         <select name="Gender[]" double="double">
           <option value="Female">Female</option>
           <option value="Male">Male</option>
         </select></div>

【问题讨论】:

  • 您好 Andrew,您提供的当前代码不会为您提供任何有用的答案。请包含包装 HTML 和 CSS 的标题。更有用的是jsfiddle.net 复制您的问题。
  • 你真的是指人们选择不止一种性别? (无需在该名称中输入[]

标签: html forms header fixed


【解决方案1】:
<div class="fixed">
    <h1>Welcome</h1>
</div>

<div class="form">
    <form action="website.php" method="POST">
       <strong>Name:</strong>
       <input type="text" name="user"/>
       <strong>Gender<FONT COLOR="#FF0000">*</FONT></strong>
       <select name="Gender[]" double="double">
           <option value="Female">Female</option>
           <option value="Male">Male</option>
       </select>
   </form>
</div>

还有 CSS

.fixed
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    margin:0 auto;
}

.form
{
    margin: 80px auto;
    width: 200px;
    line-height: 40px;
}

input, select
{
    width: 120px;
}

Fiddle is here

【讨论】:

  • 这很好,但是姓名和性别输入仍然随着表单的其余部分滚动。只有 Welcome 保持不变。
  • 稍作修改,现在完美运行,非常感谢!!
【解决方案2】:

把css代码写成

CSS

#fixheader{
    position: fixed;
}

HTML

<div id='fixheader'>    
    <h1>Welcome</h1>
</div>


 <form action="website.php" method="POST">
      <strong>Name:</strong>
        <input type="text" name="user"/>
         <strong>Gender<FONT COLOR="#FF0000">*</FONT></strong>
         <select name="Gender[]" double="double">
           <option value="Female">Female</option>
           <option value="Male">Male</option>
         </select></div>

【讨论】:

    猜你喜欢
    • 2020-08-20
    • 1970-01-01
    • 2013-07-27
    • 2011-05-10
    • 2015-08-22
    • 2014-08-03
    • 1970-01-01
    相关资源
    最近更新 更多