使用CSS添加垂直线和对齐图标 [英] Add Vertical Line and Align Icons using CSS
本文介绍了使用CSS添加垂直线和对齐图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在橙色图标和文本字段之间添加一条垂直线，然后修正OR文本的位置并正确对齐图标，如下图所示。我可以对我的代码做什么更新？
I am trying to add a vertical line between the orange icons and text fields and then also fix placement of the "OR" text and align the icons properly, as shown in the image below. What updates can I make to my code to do that?
我想要什么
我现在所拥有的
<html>
<head>
<style type="text/css">
body{
width:1000px;
font-family:verdana;
}
input{
position:relative;
left:143px;
width:70%;
height:50px;
padding:10px;
}
textarea{
position:relative;
left:68px;
width:70%;
height:150px;
}
.label{
display:inline;
width:140px;
}
.icon{
float:left;
}
.divitem{
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-top:1px solid #7C94A0;;
border-bottom:1px solid #7C94A0;;
}
.field{
background-color:#C6DEFF;
border:1px solid #7C94A0;
}
#sub{
width:80px;
height:40px;
left:0px;
border:1px solid #7C94A0;
border-radius:5px;
}
#mail{
left:149px;
}
#phone{
left:139px;
}
#name{
width:1024px;
height:100px;
}
#cntct{
width:1024px;
}
#desc{
width:1024px;
border-style:none;
}
#dlabel{
vertical-align:top;
}
</style>
<title>E-mail US</title>
</head>
<body>
<h1>E-mail Us</h1>
<form action="confirmed.php" method="get">
<div class="divitem" id="name">
<h2 class="label">Name</h2>
<input class="field" type="text"/>
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
</div>
<div class="divitem" id="desc">
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
<h2 id="dlabel" class="label">Description</h2>
<textarea class="field"></textarea>
</div>
<div class="divitem" id="cntct">
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
<h2 class="label">Email</h2>
<input id="mail" class="field" type="text"/>
<br/><span id="or">Or</span><br/>
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
<h2 class="label">Phone</h2>
<input id="phone" class="field" type="text"/>
<br/>
<br/>
<input id="sub" type="submit" value="SUBMIT">
</div>
</form>
</body>
</html>
推荐答案
<form action="confirmed.php" method="get">
<div class="divitem" id="name">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2>Name</h2>
</div>
<div class="field">
<input type="text" />
</div>
</div>
<div class="divitem" id="desc">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2 id="dlabel">Description</h2>
</div>
<div class="field">
<textarea class="field"></textarea>
</div>
</div>
<div class="divitemcntct" id="cntct">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2>Email</h2>
</div>
<div class="field">
<input id="mail" type="text" />
</div>
</div><span id="or">Or</span>
<div class="divitemPhone" id="Phone">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2>Phone</h2>
</div>
<div class="field">
<input id="phone" type="text" />
</div>
</div>
<div class="divitem" id="desc">
<br/>
<br/>
<input id="sub" type="submit" value="SUBMIT" />
</div>
</form>
CSS
CSS
.divitem {
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-top:1px solid #7C94A0;
border-bottom:1px solid #7C94A0;
width:1000px;
height:100px;
}
.label {
display:inline;
width:200px;
float:left;
height:100px;
text-align:center;
}
.icon {
margin:0px;
margin-left:-5px;
padding:0px;
float:left;
border-right:1px solid black;
height:100px;
}
input, textarea {
position:relative;
left:143px;
width:60%;
height:50px;
padding:10px;
background-color:#C6DEFF;
border:1px solid #7C94A0;
}
#or {
text-align:center;
width:1000px;
display:block;
font-weight:bold;
background-color:#BFD6F6;
}
#sub {
width:80px;
height:40px;
left:0px;
border:1px solid #7C94A0;
border-radius:5px;
background-color:#E6E6E6;
font-weight:bold;
}
.divitemcntct
{
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-top:1px solid #7C94A0;
width:1000px;
height:100px;
}
.divitemPhone
{
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-bottom:1px solid #7C94A0;
width:1000px;
height:100px;
}
小提琴
Fiddle
这篇关于使用CSS添加垂直线和对齐图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
