css floating 2 inputfields in a form

ⅰ亾dé卋堺 提交于 2019-12-06 08:51:00

I think this is what you want:

fieldset { 
    height: 330px; 
    width: 580px;
}

label { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #ECECEC;
    text-decoration: none;
    width: 100px;
    display: block;
}
input {
    width: 250px;
    height: 25px;
    color:#bababa;
    padding:5px;
    font-size: 12px;
    -moz-border-radius: 6px;
    margin-right: 15px;
}

.fl, .fd { 
    float: left; 
    margin-bottom:15px;
 }

Edit: working example: http://jsfiddle.net/7hMCN/

There are some semantic issues using form controls inside a list. But the easiest way is to get to your solution would be to wrap each <label><input> combo in a <div> then position the <div>. Using as table is a very old way to do this.

CSS

form div.left {
 width: 20%;
 float: left;
 display: inline;
 }
form div.right {
 width: 20%;
 float: right;
 display: inline;
 }

HTML

<form>
<div class="left"><label for="one">Label one</label><br>
<input id="one"></div>
<div class="right"><label for="two">Label two</label><br>
<input id="two"></div>

you could probably get fancy if you don't want to use the <br> like wrapping either the <label> or <input> in a span and position it. Can you expand on question 3?

Issue 1 [and 2?]) I added <br /> new line elements (you could possibly have the labels float left or change display:block;).

Issue 3) I used :nth-of-type(odd) and added a margin-right

Fiddle example here

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!