Question

我刚刚编写了一个HTML表单，并且我很难将注释字段与文本字段右侧对齐。

我有3个文本字段在彼此之下，我希望将注释文本字段对齐到它们的右边，我已经尝试将其右移，然后给它一个负的上边距以将其向上移动但是标签文本读取“评论”不会与文本字段一起浮动，因为它没有类

我也尝试用2个表格单元格分隔它们，但这并没有帮助，因为当我想通过响应式布局在移动设备中查看时，我可以移动注释字段，因为它卡在表格单元格中

这是我试过的浮动代码的例子

    <style type="text/css">
    ![enter image description here][1]<!--
    body {
background-color: #FFF;
    }

    #form {
width:960px;
background-color:#edf8ff;
height:650px;
    }

    .gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
    }

    .gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
    }

    .gezza-comments{
width:437px;
height:300px;
float:right;
margin-top:-80px;
    }

    -->
    </style></head>

    <body>


    <div id="form">

    <form action="" class="gezza-form" method="post" >
    First Name<br />
    <input name="firstname" type="text" class="gezza-field" /><br/>
    Last Name<br />
    <input name="lastname" type="text" class="gezza-field" /><br/>
    Email Address<br />
    <input name="email" type="text" class="gezza-field" />
    Comments<textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea>
    </form>


    </div><!-- close form -->

这就是我想要实现的目标

[1]：http://i.stack.imgur.com/g3yO8.png查看图片

Answer 1

从评论框样式中删除margin-top:-80; float:right，并将注释框放在div中，然后放在表单的其他字段之前。将div浮动到右侧。请参阅下面显示的示例代码：

<style type="text/css">
    ![enter image description here][1]<!--
    body {
background-color: #FFF;
    }

    #form {
width:960px;
background-color:#edf8ff;
height:650px;
    }

    .gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
    }

    .gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
    }

    .gezza-comments{
width:437px;
height:300px;
    }

    -->
    </style></head>

    <body>


    <div id="form">

    <form action="" class="gezza-form" method="post" >
    <div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
    First Name<br />
    <input name="firstname" type="text" class="gezza-field" /><br/>
    Last Name<br />
    <input name="lastname" type="text" class="gezza-field" /><br/>
    Email Address<br />
    <input name="email" type="text" class="gezza-field" />

    </form>

它适用于我的电脑，应该可以在手机上使用。

Answer 2

我认为你的解决方案是这样的。请尝试

<style type="text/css">
<!--
body { background-color: #FFF;
}

#form { width:960px; background-color:#edf8ff; height:650px;
}

.gezza-form { width:894px; margin:0 auto; margin-top:20px;
}

.gezza-field { width:437px; height:25px; margin-bottom:10px;  
border: 1px solid #d9e7f1;  }

.gezza-comments{ width:437px; height:300px;

margin-top:10px;
}

-->
</style></head>

<body>


<div id="form">

<form action="" class="gezza-form" method="post" >
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" /><br/>
Comments<br/> <textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea>
</form>


</div><!-- close form -->

对齐表单字段并修复响应式布局

2 个答案: