Using CSS to align two text input elements

StackOverflow https://stackoverflow.com/questions/22370915

  •  13-06-2023
  •  | 
  •  

Pregunta

Sorry if this is such a basic question, but how do I left align two text box elements in different divs with labels that are different lengths? I have a screen shot below. I want to align the textbox for "Dive Profile Id" and "Dive Profile Name". The way I have it now, is the "Dive Profile Id" and "Description" labels and textbox are in one div and the "Dive Profile Name" is in another div. How would I align these two input elements?

enter image description here

Here is my actual HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <LINK href="dive.css" rel="stylesheet" type="text/css">

    </head>
    <body>
        <div id="main" >
            <div id="header">
                <form name="header">
                    <div id="topline">
                       <label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
                       <label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
                    </div>
                    <div id="secondline">
                       <label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
                    </div>
                </form>
            </div>
                        <div id="profilePlot">
                        </div>

                        <div id="buttonMenu">
                        </div>
        </div>
        <div name="diveData">
        </div>    
        <div id="mydiv">
        </div>
    </body>
</html>
¿Fue útil?

Solución

the easy way is to transform your label into inline blocks and giving them the same size

with something like this :

<label class="label" for="profileId"...
<label class="label" for="profileName" ...

and the CSS, for example:

.label {
   display: inline-box;
   width: 100px;
}

so if you want the style in your html :

<div id="topline">
   <label for="profileId" style="display:inline-box;width:100px;">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
   <label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
   <label for="profileName" style="display:inline-box;width:100px;">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>

Otros consejos

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <LINK href="dive.css" rel="stylesheet" type="text/css">

    </head>
    <body>
        <div id="main" >
            <div id="header">
                <form name="header">
                    <div id="topline">
                       <label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
                        <br />
                       <label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px; ">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
                    </div>
                    <div id="secondline">
                       <label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
                    </div>
                </form>
            </div>
                        <div id="profilePlot">
                        </div>

                        <div id="buttonMenu">
                        </div>
        </div>
        <div name="diveData">
        </div>    
        <div id="mydiv">
        </div>
    </body>
</html>

Include bootstrap.css 

<html>
    <head>
        <title></title>
        <!--INCLUDE BOOTSTRAP.CSS--->
        <!-- <LINK href="dive.css" rel="stylesheet" type="text/css"> -->
<style>
label {
    display: inline!important;
}
</style>
    </head>
    <body>
        <div id="main" >
            <div id="header">
                <form name="header">
                    <div id="topline" class="span8 control-group">
                       <label for="profileId" class="control-label">Dive Profile Id </label>
                       <input  type="text" name="profileId" id="profileId" class="controls">
                       <label for="descriptionTxtArea" class="control-label">Description</label>
                       <textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea" class="controls"></textarea>
                    </div>
                     <div class="clearfix"></div>
                    <div id="secondline " class="control-group">
                       <label for="profileName" class="control-label" >Dive Profile Name</label>
                       <input  type="text" name="profileName" id="profileName" class="controls">
                    </div>
                </form>
            </div>
                        <div id="profilePlot">
                        </div>

                        <div id="buttonMenu">
                        </div>
        </div>
        <div name="diveData">
        </div>    
        <div id="mydiv">
        </div>
    </body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top