Question

我遇到的问题是我的样式表不能同等地应用于所有相同类型的对象。这是我的HTML：

    <form method="post" action="FILLTHISINLATER" name="NewFeaturesRequest" target="_blank">
        <fieldset id="CustInfo">
            <legend>Customer Information</legend>
            <ol>
            <p>Please provide the name of the person requesting this new feature.</p>
            <li>
                <label id="lblFName" for="txtFName">First Name:</label>
                <input type="text" name="FName" tabindex="1" id="txtFName" />
            </li>
            <li>
                <label id="lblLName" for="txtLName">Last Name:</label>
                <input type="text" name="LName" tabindex="2" id="txtLName" />
            </li>
        </fieldset>

        <fieldset id="FeatureInfo">
             <legend>New Feature Information</legend>
                <p align="left">What category does this feature fit into?</p>
                    <div id="radios" align="left">
                        <ol>
                            <li>
                                <input name="fType" type="radio" value="iPhone" />iPhone</li>
                            <li>
                                <input name="fType" type="radio" value="Messaging" />Messaging</li>
                            <li>
                                <input name="fType" type="radio" value="Contacts" />Contacts</li>
                         </ol>
                     </div>
         </fieldset>
         <fieldset id="AgentInfo">
              <legend>Support Agent</legend>
                  <p>Your Name: <select id="ddbxAGENT" name="ddbxAGENT" onchange="display_unlisted_agent()">
                        <option selected="selected">Select Your Name</option>
                        <option value="Allen">Allen</option>
                        <option value="Ash">Ash</option>
                        <option value="Beau">Beau</option>
                      </select>
                  </p>
         </fieldset>

我把它减少了很多。接下来，我的传奇和字段集的CSS（EDITED包含来自misterManSam的建议：

fieldset {
  margin:0;
  padding:0;
  border-top: Green 2px solid;
  border-left: none;
  border-right: none;
  border-bottom:none;
}
legend {
  font-weight: bold;
  color: Navy;
  padding:0;
  margin:0;
}

最后，它实际上是什么样的：

enter image description here

为什么，为什么，到目前为止第二个字段集上的绿色边框是否突出？和其他两个一样使用相同的样式，那么到底是怎么回事？它发生在Chrome，IE和Firefox中。它纯粹是装饰性的，但是有这样的错误是不专业的。

Answer 1

无论可能是什么，字段集边框都会扩展到容器的宽度。您没有显示在整个表单周围绘制蓝色边框的代码。如果我更正了HTML验证错误并在body标签上放了一个宽度，我得到了这个，它似乎正确显示，即所有字段集顶部边框都是相同的宽度：

<head>
<style type="text/css">
body {width: 500px;}
fieldset {
  margin:0px;
  border-top: Green 2px solid;
  border-left: none;
  border-right: none;
  border-bottom:none;
}
legend {
  font-weight: bold;
  color: Navy;
}
</style>
</head>
<body>
<form method="post" action="FILLTHISINLATER" name="NewFeaturesRequest" target="_blank">
    <fieldset id="CustInfo">
        <legend>Customer Information</legend>
        <p>Please provide the name of the person requesting this new feature.</p>
        <ol>
        <li>
            <label id="lblFName" for="txtFName">First Name:</label>
            <input type="text" name="FName" tabindex="1" id="txtFName" />
        </li>
        <li>
            <label id="lblLName" for="txtLName">Last Name:</label>
            <input type="text" name="LName" tabindex="2" id="txtLName" />
        </li></ol>
    </fieldset>
    <fieldset id="FeatureInfo">
         <legend>New Feature Information</legend>
            <p align="left">What category does this feature fit into?</p>
                <div id="radios" align="left">
                    <ol>
                        <li>
                            <input name="fType" type="radio" value="iPhone" />iPhone</li>
                        <li>
                            <input name="fType" type="radio" value="Messaging" />Messaging</li>
                        <li>
                            <input name="fType" type="radio" value="Contacts" />Contacts</li>
                     </ol>
                 </div>
     </fieldset>
     <fieldset id="AgentInfo">
          <legend>Support Agent</legend>
              <p>Your Name: <select id="ddbxAGENT" name="ddbxAGENT" onchange="display_unlisted_agent()">
                    <option selected="selected">Select Your Name</option>
                    <option value="Allen">Allen</option>
                    <option value="Ash">Ash</option>
                    <option value="Beau">Beau</option>
                  </select>
              </p>
     </fieldset>

我注意到一些应该用CSS替换的align="left"属性，但它们似乎不是导致问题的原因。

Answer 2

您需要移除#infoboxes上的宽度。

#infoboxes {
    /*width:650px;*/
    float:left;
    padding:10px;
}

Here is a Jsfiddle!

CSS规则不适用于所有字段集？

2 个答案: