Question

这是HTML

        <div id="header">
        </div> <!-- end header -->

        <div id="main">
            <div id="stylized" class="myform">
            <form id="form" name="form">
                <label>Name
                <span class="small">of company, business, etc...</span>
                </label>
                <input type="text" name="name" id="name"/>

                <label>Status Message
                <span class="small">Max 40 Characters</span>
                </label>
                <input type="text" name="statusmessage" id="statusmessage">

                <label>URL to Menu
                </label>
                <input type="text" name="url" id="url"/>

                <button type="submit">Submit</button>
                <div class="spacer">
                </div>
            </form><!-- end form -->

            <div id="stylized1" class="myform1">
                <form id="form1" name="form">
                <label>Street Address 
                </label>
                <input type="text" name="stretaddress" id="streetaddress"/>

                <label>City
                </label>
                <input type="text" name="city" id="city"/>

                <label>State
                </label>
                <input type="text" name="state" id="state"/>

                <label>ZIP
                </label>
                <input type="text" name="zip" id="zip"/>

                <div class="spacer">
                </div>
                </form><!-- end form1-->
            </div><!-- end stylized -->

        </div><!-- end main -->
    </div><!-- end container -->

</body>
    </head>

这是CSS

#container {
    margin: auto;
    width: 800px;
}

#header {
    position: relative;
    height: 147px;
    background: url(images/header.png) no-repeat;
}

#main {
    position: relative;
    height: 653px;
    background: url(images/main.png) no-repeat;
}

#form {
    color: #c4c1c1;
    margin: 100px 20px 0px 10px;
}

.spacer{
    clear:both;
    height:1px;
}

#stylized{
    border:solid 2px #c4c1c1;
}

#stylized label{
    display:block;
    font-family: arial;
    font-weight:bold;
    width:140px;
    margin: 2px 0 0px 10px;
}

#stylized .small{
    color:#c4c1c1;
    display:block;
    font-size:12px;
    font-weight:normal;
    width:140px;
 }

#stylized input{
    float:left;
    font-size:15px;
     padding:5px 25px;
     border:solid 1px #c4c1c1;
     width:200px;
     margin:2px 0 20px 10px;
 }

#stylized button{
    clear:both;
    margin:133px 0 0px 100px;
    width:125px;
    height:31px;
    text-align:center;
    line-height:3px;
    color:4b4b4b;
    font-size:15px;
    font-weight:bold;
}

 #stylized1{
     position: relative;   
     margin: -1600px 0px 10px 450px; 
 }

无论我改变多少次，上边距都没有正确的坐标。每当我改变边距时，它只会在视觉上回到同一个地方。怎么会？是因为#container宽度？或者我需要一些代码？我对此很新。谢谢你的帮助。

#stylized1 label{
    display:block;
    float:left;
    font-family: arial;
    font-weight:bold;
    width:140px;
    color:#c4c1c1;
    margin: 2px 0px 0px 10px;
}

#stylized1 input{
    font-size:15px;
    padding:5px 25px;
    border:solid 1px #c4c1c1;
    width:200px;
    margin:0px 0px 20px 10px;
}

Answer 1

剪切和粘贴是你的敌人。我怀疑你想要重复的表单，表单条目的一半或每一半。此外，您在整个地方都使用相对位置。如果你这样做那么你可能做错了什么。在这个解决方案中，我将两个入口div向左浮动。您可以调整stylized1上的上边距来定位它。我还清理了很多你的html结构。

我假设您正在使用-1600px编辑元素的上边距，但如果我错了，请告诉我您正在编辑哪个边距。

http://jsfiddle.net/fVh23/

<div id="container">
    <div id="header"></div> <!-- end header -->

    <div id="main">
        <form id="form" name="form">
            <div id="stylized">

                <label>Name
                <span class="small">of company, business, etc...</span></label>
                <input type="text" name="name" id="name"/>

                <label>Status Message
                <span class="small">Max 40 Characters</span></label>
                <input type="text" name="statusmessage" id="statusmessage">

                <label>URL to Menu</label>
                <input type="text" name="url" id="url"/>

            </div> <!-- end stylized -->

            <div id="stylized1">

                <label>Street Address</label>
                <input type="text" name="stretaddress" id="streetaddress"/>

                <label>City</label>
                <input type="text" name="city" id="city"/>

                <label>State</label>
                <input type="text" name="state" id="state"/>

                <label>ZIP</label>
                <input type="text" name="zip" id="zip"/>

            </div><!-- end stylized1 -->
            <br style="clear: both;" />
            <button type="submit">Submit</button>
            <div class="spacer">

        </form><!-- end form1-->
    </div><!-- end main -->
</div><!-- end container -->

为什么我不能在表单中添加边距？

1 个答案: