Fiddle

Question

我正在尝试在橙色图标和文本字段之间添加一条垂直线，然后修复＆＃34; OR＆＃34;的位置。文本并正确对齐图标，如下图所示。我可以对我的代码做什么更新？

我想要什么

enter image description here

我现在拥有的

enter image description here

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

Answer 1

<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

.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

enter image description here

使用CSS添加垂直线和对齐图标

1 个答案:

Fiddle