對齊表單字段並修復響應式佈局

即時編碼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查看圖片

來源

2012-02-25 Gezzamondo

你應該先提高你的HTML代碼：使用'label'元素爲標籤（你可以用或不在身邊的每個輸入每個標籤），然後將它們與自己與/輸入關聯ID屬性。參見[形式]（http://www.braillenet.org/accessibilite/referentiel-aw21-en/index.php#formulaire）和[WCAG 2.0 Technique H44]（http://www.w3.org/TR/WCAG20 -TECHS/H44.html） – FelipeAls 2012-02-25 15:15:12

拆下評論框風格margin-top:-80; float:right並把註釋框格內，表單的其他字段之前。將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>

它在我的電腦中工作，應該在移動工作。

來源

2012-02-25 10:26:21 user1004912

我認爲你的解決方案是這樣的。請嘗試

<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 -->

來源

2012-02-25 10:27:39

你的答案不會將評論字段浮動到正確的位置？！？！？！ – Gezzamondo 2012-02-25 10:57:15

對齊表單字段並修復響應式佈局

回答

相關問題