制作具有正确对齐方式和样式的表单答案

【问题标题】：Making a Form with the Right Alignment and Style制作具有正确对齐方式和样式的表单
【发布时间】：2014-01-20 12:02:31
【问题描述】：

我想用 HTML/CSS 制作这个表单：

不幸的是，我似乎无法获得正确的样式和对齐方式。我已经做了好几个小时了，无论我采取什么途径似乎都只能得到垃圾。下面是我最好的代码，不是很好，但就是这样。任何人都可以帮助修复代码以反映上面的图片吗？我真的很感激。

<style> * {
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .group:after {
      content: "";
      display: table;
      clear: both;
    }
    .containerANE {
    overflow: hidden;
    background: #C6DEFF;
    width: 992px;
    }

    .rightANE {
     float: right;
     width: 30px;
    outline: 1px solid #8191a6;
    }
    .leftANE {
     float: left;
     width: 152px;
    outline: 1px solid #8191a6;
    }
    .middleANE {
     width:717px;
     outline: 1px solid #8191a6;
    }
</style>


<h1>E-mail US</h1>
<form action="file:///C:/Users/Owner/Desktop/confirmed.php" method="get">
<div class="group containerANE">
<div class="group rightANE">
<img width="25" src="http://i.imgur.com/881g5D7.png">
</div>
<div class="group leftANE">
 Name
 </div>
 <div class="group middleANE">
 <input type="text">
 </div>

<div class="group rightANE">
 <img width="25" src="http://i.imgur.com/881g5D7.png"> 
 </div>
 <div class="group leftANE">
 Description 
 </div>
 <div class=middleANE>
 <textarea rows="4" cols="50">

</textarea> 
 </div>


<div class=rightANE>
 <img width="25" src="http://i.imgur.com/881g5D7.png"> 
</div>
<div class=leftANE>
E-mail<br><br>Phone
</div>
 <div class=middleANE>
<input type="text">
<br> OR <BR>
<input type="text">
</div>
<input type="submit" value="SUBMIT">

This is a representation of the code in JSFiddle.

【问题讨论】：

首先...欢迎来到堆栈溢出...您现在能展示一下您得到了什么吗？？
您的具体问题是什么？您的代码与该图像相去甚远-您能否缩小特定问题的范围。除了，“它看起来不一样，请让它看起来一样。”
谢谢！这就是我现在得到的i.imgur.com/WZ8iy3c.jpg
@RonakBhatt OP 没有使用表格？
在 div 中相应地在样式标签中使用边框

标签： html css forms

【解决方案1】：

这个FIDDLE 会给你一个开始。

HTML

<table class='holder'>
  <tr>
      <td>Name:</td>
      <td><input type='text' size=40></input></td>
      <td><div class='icondiv'></div></td>
  </tr>
  <tr>
      <td>Desscription:</td>
      <td><textarea rows=6 cols=31></textarea></td>
      <td><div class='icondiv'></div></td>
  </tr>
  <tr>
      <td>Email:</td>
      <td><input type='text' size=40></input></td>
      <td></td>
  </tr>
  <tr>
      <td colspan='3' id='single'>or<div id='singlediv' class='icondiv'></div></td>
  </tr>
  <tr>
      <td>Phone:</td>
      <td><input type='text' size=40></input></td>
      <td></td>
  </tr>
  <tr>
      <td colspan='3' id='single'><input type='submit'></input></td>
    </tr>
</table>

CSS 有点长，无论如何它都处于小提琴中。

使用 CSS 来优化它以满足您的需求。

【讨论】：