Question

我有一个“形式”的div;我想将指定的div http://image.prntscr.com/image/ca8bddad89f64b628a168598d57e985b.png与另一个div对齐。我不明白为什么我不能对齐<div>，因为你会看到我在div中做了相同的位置但没有任何东西

<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="iconos/usados/logo.png" type="image/png" sizes="16x16">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="formBase">
    <div id="nombre">
        <p id="pnombre">Nombre: </p><input type="text" id="nuser" name="nuser" placeholder="Nombre">
    </div>
    <div id="apellido">
        <p id="papellido">Apellidos: </p><input type="text" id="auser" name="auser" placeholder="Apellidos">
    </div>
    <div id="dni">
        <p id="pdni">DNI: </p><input type="text" id="adni" name="auser" placeholder="DNI">
    </div>

    <hr id="hr1">
<div>

的CSS：

/*----------------Formulario------------------------*/
#formBase {
width: 60%;
height: 60%;
border-style: solid;
border-width: 2px;
border-color: black;
position: relative;
top: 20%;
left: 20%;
}
/*----------------Formulario Nombre------------------------*/
#pnombre {
display: inline;
font-size: 130%;
}

#nombre {
width: 30%;
position: relative;
top: 5%;
left: 10%;
}

#nuser {
width: 50%;
height: 7%;
}

#hr1 {
position: relative;
top: 20%;
}

/*----------------Formulario Apellido------------------------*/
#papellido {
display: inline;
font-size: 130%;
}

#apellido {
width: 30%;
position: relative;
top: 10%;
left: 9%;
}

#auser {
width: 50%;
height: 7%;
}

/*----------------Formulario DNI------------------------*/

#pdni {
display: inline;
font-size: 130%;
}

#dni {
width: 30%;
position: relative;
top: 10%;
left: 50%;

}

#adni {
width: 50%;
height: 7%;
}

Answer 1

您的ID #dni的{{1}}属性为50％，与其他所有属性一样，将其更改为9％：

left

https://jsfiddle.net/61ke6sg5/

Answer 2

尝试以下代码并尝试在测试中实施。

<强>的test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="SMS.css">
</head>
<body>
    <div id="MainDiv" name="MainDiv">
        <div id="DivHolder" name="DivHolder">
            <table border="0px">
                <tr>
                    <td><label>ID:</label></td>
                    <td><input type="text" id="TextId" name="TextId" placeholder="Enter ID" class="InputBox" /></td>
                </tr>
                <tr>
                    <td><label>Password:</label></td>
                    <td><input type="password" id="TextPassword" name="TextPassword" placeholder="Enter Password" class="InputBox" /></td>
                </tr>
                <tr>
                    <td><label>Age:</label></td>
                    <td><input type="number" id="TextAge" name="TextAge" placeholder="Select Age" class="InputBox" /></td>
                </tr>
            </table>
            <div id="HolderLine" name="HolderLine">&nbsp;</div>
        </div>
    </div>
</body>
</html>

<强> SMS.css

@charset "utf-8";
/* Author : Madhu Bilas Shrestha */

html{
    text-align: center;
}
body {
    background-color: #333333;
    display: inline-block;
    margin: 0px;
    text-align: center;
}
div{
    border: none;
}
#MainDiv{
    height: 500px;
    width: 800px;
    background-color: azure;
}
#DivHolder{
    min-height: 150px;
    height: auto;
    width: 95%;
    background-color: aqua;
    float: left;
    text-align: left;
    margin: 10px;
    padding: 10px;
}
.InputBox{
    display: block;
    margin: 0;
    width: 375px;
    font-family: sans-serif;
    font-size: 12px;
    appearance: none;
    box-shadow: none;
    border-radius: 5px;
    padding: 7px;
    border: solid 5px #c9c9c9;
    transition: border 0.3s;
}
#HolderLine{
    background-color: #74D214;
    height: 2px;
    width: 98%;
    margin: 10px;
}

希望这会对你有所帮助。

<div>的位置

2 个答案: