Question

我想将文本框排在＆＃39;附加信息＆＃39;旁边。但我不知道该怎么做。我已经将标签包裹在整个输入中，这些标签最初只是围绕标题文本进行包装，因为我已准备好进行一些javascript表单验证。所以我已经通过span标签定位了文本，就像我在小提琴中看到的那样。但是当我改变文本框移动位置的东西时。

这是我的代码： http://jsfiddle.net/528Wx/

HTML

 <form>
 <div class="formColumn2">
 <label for="additionalInfo"><span>Addtional Information</span></label><br>
 <textarea name="comment" form="usrform">Enter text here...</textarea>
 </div>
 </form>

CSS

 .bookingForm {
height:500px;
background-image:url('images/formpattern.png') 
 }

 .bookingForm img {
width:200px;
margin:90px 0 0 170px;

 }
 /*need to come back to later */
 .bookingForm img:nth-child(3){
margin:240px 0 0 -200px;    

 }

 form {
padding:20px 0 0 70px;
margin-left: 10%;
color:#fff;
 }
 /*this is for text width column2*/
 .formColumn2 label span {
 width: 150px;
 display: inline-block;
 }

 .formColumn1,.formColumn2{
float:left;
 }

 /*aligning top column 2 with title*/
 .formColumn2 {
 margin-top:-80px;
margin-left: 50px;
 }

 /*drop down and input width*/
 select,input{
 width:200px;
 margin:10px 0;
 }

 /*leave*/
 textarea {
 vertical-align: top;
height:110px;
width: 200px;
resize:none;
 }

Answer 1

我不确定，你真正想要的是什么。但根据我的理解，我为你创建了一个演示 -

HTML：

<div class="formColumn2">
            <label for="name"><span>Full Name*</span>
                <input type="text" name="name"/>
            </label>
            <br>
            <label for="email"><span>Email*</span>
                <input type="text" name="email"/>
             </label>
            <br>
            <label for="phoneNumber"><span>Phone Number*</span>
                <input type="number" name="phoneNumber"/>
            </label> 
            <br>
            <label for="postalAddress"><span>Postal Address</span>
                <input type="text" name="postalAddress"/>
             </label>
            <br>
            <label for="city"><span>City</span>
                <input type="text" name="city"/>
             </label>
            <br>
            <label for="additionalInfo"><span>Addtional Information</span>
               <textarea name="comment" form="usrform">Enter text here...</textarea>                
            </label>
            <br>
    </div>

和CSS：

 textarea {
    vertical-align: top;
    height:110px;
    width: 200px;
    resize:none;
    display: inline-block;
 }

Demo

Answer 2

查看此更新 Fiddle

您可以使用float

<label for="additionalInfo" ><span style="margin-top:30px;float:left;">Addtional Information</span></label><br>
            <textarea name="comment" form="usrform">Enter text here...</textarea>

<强> CSS

textarea {
    vertical-align: top;
    height:110px;
    width: 200px;
    resize:none;
    float:right;
 }

Answer 3

Just remove <br> which you have add

<div class="formColumn2">
            <label for="name"><span>Full Name*</span>
            <input type="text" name="name"><br>
            </label>

            <label for="email"><span>Email*</span>
            <input type="text" name="email"><br>
             </label>

            <label for="phoneNumber"><span>Phone Number*</span>
            <input type="number" name="phoneNumber"><br>
            </label> 

            <label for="postalAddress"><span>Postal Address</span>
             <input type="text" name="postalAddress"><br>
             </label>

            <label for="city"><span>City</span>
            <input type="text" name="city">***<br>***<< THis one to remove
             </label>

            <label for="additionalInfo"><span>Addtional Information</span></label><br>
            <textarea name="comment" form="usrform">Enter text here...</textarea>

    </div>

<强> Demo

标签插入一个换行符。

标签是一个空标签，表示它没有结束标签

Answer 4

试试此HTML代码：

<div class="formColumn2">
            <label for="name"><span>Full Name*</span>
            <input type="text" name="name"><br>
            </label>

            <label for="email"><span>Email*</span>
            <input type="text" name="email"><br>
             </label>

            <label for="phoneNumber"><span>Phone Number*</span>
            <input type="number" name="phoneNumber"><br>
            </label> 

            <label for="postalAddress"><span>Postal Address</span>
             <input type="text" name="postalAddress"><br>
             </label>

            <label for="city"><span>City</span>
            <input type="text" name="city"><br>
             </label>

            <label for="additionalInfo"><span>Addtional</span></label>
            <textarea name="comment" form="usrform">Enter text here...</textarea>

    </div>

在表单中移动文本标题旁边的textarea框

4 个答案: