如何创建HTML/CSS

元件之间的空间到目前为止，我有这样的：如何创建HTML/CSS

Position Applied For: <input type="text" name="position" value="Enter Position" size="20" /> Date: <input type="text" name="date" value="mm/dd/year" size="20" /> <br/> 
 
<br/> 
 
Name: <input type="text" name="last" value="Last Name" size="20" /> <input type="text" name="first" value="First Name" size="20"/> <input type="text" name="middle" value="Middle Name" size="20" /> Phone: <input type="text" name="phone" value="Area Code First" size="20" maxlength="12"/> (Seperate with -) <br/> 
 
<br/> 
 
Address: <input type="text" name="address" value="Address" size="20" /> City: <input type="text" name="city" value="City" size="20" /> State: <input type="text" name="state" value="State" size="20" /> Zip Code: <input type="text" name="zip" value="Zip Code" size="20" maxlength="5"/> <br/>

当在浏览器的形式紧挨着对方显示出来。我如何获得一些空间，并很好地对齐？

来源

2012-01-12 lrnsomethingnew

你想让他们排队吗？每行一个？我看到你添加了一些'
'元素。这些是你想要的唯一休息吗？ – ThinkingStiff 2012-01-12 04:50:20

使用UL和css：

#a-form {list-style: none; margin:0; padding: 0;} 
 
    #a-form li {} 
 
    #a-form input {display:inline-block; margin-right: 1em;}

<ul id="a-form"> 
 
     <li>Position Applied For: <input type="text" name="position" value="Enter Position" size="20" /> Date: <input type="text" name="date" value="mm/dd/year" size="20" /></li> 
 
     <li>Name: <input type="text" name="last" value="Last Name" size="20" /> <input type="text" name="first" value="First Name" size="20"/> <input type="text" name="middle" value="Middle Name" size="20" /> Phone: <input type="text" name="phone" value="Area Code First" size="20" maxlength="12"/> (Seperate with -)</li> 
 
     <li>Address: <input type="text" name="address" value="Address" size="20" /> City: <input type="text" name="city" value="City" size="20" /> State: <input type="text" name="state" value="State" size="20" /> Zip Code: <input type="text" name="zip" value="Zip Code" size="20" maxlength="5"/></li> 
 
    </ul>

来源

2012-01-12 04:50:17 itea

谢谢！我发现有很多方法可以做到，但决定采用你的方法。 – lrnsomethingnew 2012-01-12 07:17:37

-1

许多人可能会建议别的东西，但我建议你在你的情况下使用<table>。

来源

2012-01-12 04:50:00 shinkou

内容不是表格数据。当CSS存在时，我们不会使用'

'元素进行样式设计，因为这样做会很愚蠢;） – Ktash2012-01-12 05:35:32

@Ktash当我们想要将我们的内容对齐到一个类似网格的布局时，表格在大多数情况下都更适合。因为我们可以应用一些CSS + JavaScript hacks来模仿类似的结果，但是它会导致不必要的复杂代码，这对维护非常不利。许多网页设计师主张严格使用CSS进行样式设计，但在编程统治时，更少，更清晰，因此更容易维护代码是我们所需要的。无论如何，OP似乎没有必要对齐网格中的内容，这是我认为他/她想要阅读问题的原因。 – shinkou 2012-01-12 19:10:37

'布局难以维护。我是一名网络程序员，而不是设计师，而CSS更容易维护。样式和表示的分离使得维护，更新和升级变得更加容易，现代浏览器支持足够的CSS来处理任何'

'可以做的事情。那些以“

”为基础设计的人在1997年写了一篇关于他如何毁掉互联网的有趣文章。这是一个很好的阅读，如果你有兴趣http://www.xml.com/pub/a/w3j/s1.people.html – Ktash2012-01-12 20:05:46

因为都是文本字段，它可以更容易！我会建议使用CSS显示：块功能

这里的CSS：

input[type="text"]{ 
display:block; 
margin-bottom:20px; 
}

，这里是你的榜样是I put into JSFiddle。您可能需要做一些调整才能满足您的喜好，但这是我能想到的最简单的方法！

来源

2012-01-12 04:55:17

如何创建HTML/CSS

回答

相关问题