CSS格式与表单和选项卡问题

CSS Formatting with Form and Tabs Issue

本文关键字：选项 问题 表单 格式 CSS      更新时间：2023-09-26

我遇到了一个关于HTML和CSS的独特情况。我做了一个表单，简单的输入文本框和下拉框要填写和提交。然而，我现在想添加标签到表单的顶部，我意识到，我已经包装了我的html代码与一个div表单容器(#form_container)，现在当我试图单独应用任何css，它不断抛出表单的css，或标签上的css只是不工作。我用来测试选项卡变化的css是.tabs a {....

我的HTML是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>This is my title</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="jquery.js"></script>

</head>
<body id="main_body" >
    <img id="top" src="top.png" alt="">
    <div id="form_container">
        <h1><a>Example</a></h1>
        <form id="form" class="myForm"  method="post" action="get.php">
        <div class="form_description">
            <h2>Example</h2>
            <p>Please Fill Out the Fields Below.</p>
        </div>                      
        <ul >
        <li class="tabs">
        <nav id="tab">
            <a href="#">Home</a>
            <a href="#">Topics</a>
        </nav>  
        </li>
        <li id="profile">
        <label class="description" for="">Please select your profile by clicking the button or continuing below:
        </label>
        <div>
            <input id="profilebutton" type="button" name="prof" class="button_text" value="Select Profile">
        </div>
        </li>

        <!--First Name Input--> 
        <li id="FirstName" >
        <label class="description" for="firstname">First Name </label>
        <div>
            <input id="firstname" name="firstname" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       
        <!--Last Name Input-->
        <li id="LastName" >
        <label class="description" for="lastname">Last Name </label>
        <div>
            <input id="lastname" name="lastname" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>

        <li id="age" >
        <label class="description" for="age">Age </label>
        <div>
            <input id="age" name="age" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       

        <li class="buttons">
            <input type="hidden" name="form_id"  />
            <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
            <input type="reset" class="button_text" id="resetForm" name="reset" value="Reset" />
        </li>
            </ul>
        </form> 
    </div>
    </body>
</html>

我的CSS是:

body
{
    background:#336699;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:small;
    margin:8px 0 16px;
    text-align:center;
}
.rupreg{
    display:none;
}

.tabs a {
    display: block;
    width: 60px;
    background-color: #dddddd;
}
#form_container
{
    background:#fff;
    margin:0 auto;
    text-align:left;
    width:640px;
}
#top
{
    display:block;
    height:10px;
    margin:10px auto 0;
    width:650px;
}
#footer
{
    width:640px;
    clear:both;
    color:#999999;
    text-align:center;
    width:640px;
    padding-bottom: 15px;
    font-size: 85%;
}
#footer a{
    color:#999999;
    text-decoration: none;
    border-bottom: 1px dotted #999999;
}
#bottom
{
    display:block;
    height:10px;
    margin:0 auto;
    width:650px;
}
form.myForm
{
    margin:20px 20px 0;
    padding:0 0 20px;
}
/**** Logo Section  *****/
h1
{
    background-color:#6699CC;
    margin:0;
    min-height:0;
    padding:0;
    text-decoration:none;
    text-indent:-8000px;
}
h1 a
{
    display:block;
    height:100%;
    min-height:40px;
    overflow:hidden;
}

有谁可以推荐的吗?我应该创建一个单独的css类并覆盖它吗?谢谢。

如果您想在表单上方创建导航选项卡:

    从表单容器中完全移除制表符，并将它们放置在img标签的上方和下方。
  • 这也使你的css分开。

如果你想让你的导航标签在表单内(不确定我知道为什么):

  • 尽可能直接地定位导航选项卡，并将css放置在容器css的下方。
  • CSS:基于特异性重写自身，这意味着如果您在针对导航选项卡时比针对容器时更具体，则nav-tab CSS将优先考虑。
例如

:#form_container #form .tabs #tab a {text-decoration: none}
取代:#form_container

相关文章：