css 表单 - 边距/填充问题 - 包括代码和图像

Posted 2023-03-06

【中文标题】css 表单 - 边距/填充问题 - 包括代码和图像

【英文标题】：css form- issue with margin/padding-- code & image included

【发布时间】：2012-03-30 02:41:13

【问题描述】：

我遇到了 html/css 联系表单的问题。理想情况下，我希望“标签”和“输入”彼此水平，1px 边框底部从标签延伸到定义的端点（不是定义的宽度）。这可能吗？我错过了什么？

<div id="contact">
        <div id="invite">
            <h1>Let's Talk.</h1>
            <h2 class="postinfo">
                <p>Have you got a project needing an eye for detail and a creative touch? <br>I&#39;d love to hear from you. </p>
            </h2>
        </div><!-- end invite -->
        <form action="#" method="post">
            <fieldset>
                <label for="name"><h1>Name:</h1></label>
                <input type="text" id="name" placeholder="" />

                <label for="email"><h1>Email:</h1></label>
                <input type="text" id="email" placeholder="" />

                <label for="subject"><h1>Subject:</h1></label>
                <input type="subject" id="subject" placeholder="" />

                <label for="message"><h1>Message:</h1></label>
                <textarea id="message" placeholder=""></textarea>

                <input type="submit" value="Send" />
            </fieldset><!-- end fieldset -->
        </form><!-- end form -->
    </div><!-- end contact -->

#contact 
    float: left;
    margin-left: 300px;
    margin-top: 310px;
    width: 533px;

#invite .postinfo 
    list-style-type: none;
    margin-left: ;
    width: 150px;

#form 
    float: right;
    margin-top: -85px;
    margin-left: 230px; 

#form fieldset 
    border-style: none;
    margin-left: -50px;
    margin-top: -25px;

#form fieldset label 
    padding-right: 50px;

#form fieldset input 
    width: 300px;

http://i.stack.imgur.com/B6wF8.png

【问题讨论】：

呃，我错过了公告吗？最后我检查了任何版本的 HTML 中都没有 <contact> 元素。

是的 = 这是 html 而不是 xml。您的 CSS 假定存在称为“联系”和“邀请”的有效元素，但没有。使用带有 css 的分类 div 重构您的 html 以匹配。此外 - Hs 是块元素，如果您希望标签和输入对齐，则需要将其设置为“display:inline”，在这种情况下。另外 - 你有 4 个 H1，而在任何给定页面上都应该有一个。

代码已更改，问题仍然存在？

【参考方案1】：

我对您的代码进行了一些尝试，这就是我想出的：

这是您的 HTML：

<contact>
<form action="#" method="post">
        <fieldset>
            <div class="clear">
            <label for="name"><h1>Name:</h1></label>
            <input type="text" id="name" placeholder="" />
            </div>

            <div class="clear">
            <label for="email"><h1>Email:</h1></label>
            <input type="text" id="email" placeholder="" />
            </div>

            <div class="clear">
            <label for="subject"><h1>Subject:</h1></label>
            <input type="subject" id="subject" placeholder="" />
            </div>

            <div class="clear">
            <label for="message"><h1>Message:</h1></label>
            <textarea id="message" placeholder=""></textarea>
            </div>

            <div class="clear">
            <input type="submit" value="Send" />
            </div>
        </fieldset><!-- end fieldset -->
    </form><!-- end form -->
</contact><!-- end contact -->

这是你的 CSS：

body   font-family:arial,helvetica,sans-serif ;
    font-size:14px ;
    font-weight:bold ;


h1   font-size:16px ;
    margin:0 ;
    padding:0 ;


contact 
    float: left;
    margin-left: 300px;
    margin-top: 310px;
    width: 533px;

contact invite .postinfo 
    list-style-type: none;
    margin-left: ;
    width: 150px;


contact form 
    float: right;
    margin-top: -85px;
    margin-left: 230px; 


contact form fieldset 
    border-style: none;
    margin-left: -50px;
    margin-top: -25px;


contact form fieldset label  width:100px ;
    float:left 

contact form fieldset input  
    width: 200px;
    float:right ;


.clear   clear:both ;
    line-height:30px ;

您需要根据您使用的字体大小调整标签和输入宽度。

最好的，

辛西娅