Question

很抱歉，如果这是一个基本问题，但如何将不同div中的两个文本框元素与不同长度的标签对齐？我在下面有一个屏幕截图。我想对齐“Dive Profile Id”和“Dive Profile Name”的文本框。我现在拥有它的方式是“Dive Profile Id”和“Description”标签和文本框在一个div中，“Dive Profile Name”在另一个div中。我如何对齐这两个输入元素？

enter image description here

这是我的实际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>

Answer 1

简单的方法是将标签转换为内嵌块并赋予它们相同的大小

有这样的事情：

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

和CSS，例如：

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

所以如果你想要你的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>

Answer 2

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

Answer 3

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

使用CSS对齐两个文本输入元素

3 个答案: