Я пытаюсь добавить вертикальную линию между оранжевыми значками и текстовыми полями, а затем исправить размещение текста «ИЛИ» и правильно выровнять значки, как показано на рисунке ниже. Какие обновления я могу внести в свой код для этого?Добавить вертикальную линию и выровнять значки с помощью CSS

То, что я хотел бы

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>

источник

2014-02-04 Jaga Jones

<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

источник

2014-02-04 03:51:32

спасибо, но это выглядит несколько иначе, то, что мне нужно. почтительно, вертикальные линии и значки вопросительных знаков выравниваются неправильно из того, что мне нужно: http://i.stack.imgur.com/Hnou1.jpg –

с коротким периодом времени я сделал это ..! Дайте мне некоторое время, опубликуйте ответ –

спасибо, я ценю это. Я с нетерпением жду вашего обновленного ответа! –

Добавить вертикальную линию и выровнять значки с помощью CSS

ответ

Fiddle

Смежные вопросы