Question

我遇到过HTML和CSS的独特情况。我已经制作了一个带有简单输入文本框和下拉列表的表单，以便填写和提交。但是，我现在想要在表单的顶部添加选项卡，我意识到我已经用一个div表单容器（#form_container）包装了我的html代码，现在当我尝试单独应用任何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类并覆盖它吗？感谢。

Answer 1

如果您尝试在表单上方创建导航标签：

从表单容器中完全删除选项卡，并将它们放在img标记下方和下方。
这样可以保持你的CSS分离。

如果您希望表单中有导航标签（不确定我明白为什么）：

直接定位导航标签，并将css放在容器css的下方。
CSS：根据特异性覆盖自身，这意味着如果您在定位导航标签时比在定位容器时更具体，则nav-tab css将优先。

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

使用表单和制表符进行CSS格式化问题

1 个答案: