Allignment issues in a html form_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-05 03:10 出处：网络

I have the following form in a html5 document.I am a newbie as far as html and css goes.Basically,I am trying to learn with experimenting.

相关专题：css

I have the following form in a html5 document.I am a newbie as far as html and css goes.Basically,I am trying to learn with experimenting.

<form>
    <ol style="list-style:none">
        <li style="display: inline">
            <label for="fname">First Name</label>
            <input id="fname" type="text">
        </li>
        <li style="display: inline">
            <label for="lname">Last Name</label>
            <input id="lname" type="text">
        </li>
        <li>
          开发者_运维技巧  <label for="dept">Department</label>
            <input id="dept" type="text">
        </li>
   </ol>
</form>

Coming to the challenge I am facing,

1)I need to know how I can control the spacing between the label and the input field.

2)Also the space between the two li(first name and last names).

PS:I also have a CSS file which control the font,color,input width etc.

Try the following code.

For "ol li label" (in css code) you can also use margin instead of width, to control the distance between label and input items.

<head>
    <style>
    ol{
        margin:0; 
        padding:0;
    }
    ol li{
        margin:0 0 10px 0; 
    }
    ol li label{
        width:150px; 
        float:left; 
    }
    ol li input{
        float:left;
    }
    </style>
</head>

<body>
    <form>
        <ol>
            <li>
                <label for="fname">First Name</label>
                <input name="fname" type="text">
            </li>
            <li>
                <label for="lname">Last Name</label>
                <input name="lname" type="text">
            </li>
            <li>
                <label for="dept">Department</label>
                <input id="dept" type="text">
            </li>
       </ol>
    </form>
</body>

Try using margin-bottom and margin-top on your input elements.

See here for more info on margins in css.