显示 UI 的 HTML 和 CSS 问题答案

【问题标题】：HTML & CSS issue for showing UI显示 UI 的 HTML 和 CSS 问题
【发布时间】：2013-10-16 19:15:35
【问题描述】：

这是我的html和css如下。我只是不明白为什么city & state 显示不同。如果城市和州标签出现并且输入类型并排出现，但我希望它们应该像其他输入一样一个接一个地保持在表格上。

这是我的html

<div style="background-color: rgb(241, 242, 242); height: auto; width: auto;" id="Register">
    <fieldset>


<legend>información sobre el transporte</legend>

                    <br>
                    <span id="lblBillShip" name="lblBillShip">Marque si misma que la dirección de facturación</span>
                    <span style="margin-left:330px; margin-top:-21px; display:block;" class="noEnterSubmit"><input type="checkbox" name="chkBillShipSame" id="chkBillShipSame"></span><br><br>

                    <span id="lblAdd1" name="lblAdd1">Dirección 1</span>
                    <input type="text" class="noEnterSubmit" id="txtAdd1" name="txtAdd1"><br><br>

                    <span id="lblAdd2" name="lblAdd2">Dirección 2</span>
                    <input type="text" class="noEnterSubmit" id="txtAdd2" name="txtAdd2"><br><br>

                    <span id="lblCity" name="lblCity">City</span>
                    <input type="text" class="noEnterSubmit" id="txtCity" name="txtCity"><br><br>

                    <span id="lblState" name="lblState">State</span>
                    <input type="text" class="noEnterSubmit" id="txtState" name="txtState"><br><br>
                    <br><br>

                    <span id="lblPostCode" name="lblPostCode">PostCode</span>
                    <input type="text" class="noEnterSubmit" id="txtPostCode" name="txtPostCode"><br><br><br>

                </fieldset>
             </div>

和 CSS

#main1 { width:560px; margin: 0px auto; padding:40px 20px 20px; background-color:#FFFFFF; top:50px;}
    legend { font-size:18px; margin:0px; padding:10px 0px; color:#2F9934; font-weight:bold;}
    fieldset { border-style: none;
            border-color: inherit;
            border-width: medium;
            width:322px;
            margin-left:30px;
        }
    #overlay {
          position: fixed;
          height: 100%;
          width: 100%;
          z-index: 1000000;
          color:Blue;
          background: url('/images/busy.gif');
          background-repeat:no-repeat;
          background-position:600px 390px;
          text-align:center;
        }
    #Register  label { display:block; margin:15px 0 5px;}
    #Register  input[type=text], input[type=password] { width:300px; }
    #Register input[type=checkbox] {padding-top:5px;}
    #Register  select {width:175px; height:19px; padding-top:5px;}

here is jsfiddle link

请指导我需要更改的内容，因此标签和文本框应该像其他输入一样一个接一个地保留在表单上。谢谢

【问题讨论】：

标签： html css

【解决方案1】：

这取决于您可以在一行中显示多少，并且由于“城市”和“州”标签比其他标签短，因此它们可以放在一行中而不会中断。要在标签后强制换行，您可以在样式表中添加如下内容：

#Register  span { 
    display:block; 
}

【讨论】：

这是正确的。您可能想要添加该跨度自然是 inline 元素，如果空间可用，它们通常会彼此相邻放置。

【解决方案2】：

如果您将 CSS 添加到 span 元素 float:left。这解决了问题

#Register span{
    float: left;
    width: 100%;    
}

更新了你的fiddle

【讨论】：

我不明白为什么这会得到支持。您给出的解决方案只是偶然解决了问题。浮动元素通常会导致它们彼此相邻显示。这不是OP想要的。幸运的是float:left; 自动将元素设置为块元素，解决了 OP 的问题。看来你自己也不懂 CSS 的基础知识，不过运气好。

【解决方案3】：

   #Register span {
    display:block;
    }

将解决问题。

不过，您应该使用 label 而不是 span。

JSFiddle Demo

【讨论】：