Question

大家好，我实际上一直在google上寻找这个，甚至youtube，但在任何地方都没有运气。

我实际上是第一次遇到这个问题，我想在中心对齐所有内容，但如果您注意到段落和输入文本没有垂直对齐。它们是弯曲的，但在中心对齐，我试图为文本输入做一个完美的线条和

换句话说就像这样

                  Age:           ______________
                  Year:          ______________   
                  group:         ______________

不是像这样的默认中心位置

                        Age:           ______________
                      Year:          ______________   
                        group:         ______________

无论如何这是我的CSS和HTML代码

<html>
  <head>
  </head>
  <body>


    <div id="container">
      <h3 class="header"> Welcome to the registration form </h3>
      <div id="border"> </div>


        <div id="box">

         <p> Enter Name: <input class="in" type="text" name="name" value="${param.name}"> </p>
         <p> Enter Age: <input class="in" type="text" name="name" value="${param.name}"> </p>
         <p> Enter Address: <input class="in" type="text" name="name" value="${param.name}"> </p>
         <p> Enter phone: <input class="in" type="text" name="name" value="${param.name}"> </p>

        </div><!--box -->


    </div><!--container -->
  </body>
</html>

和我的css

/* 
    Document   : style
    Created on : Jan 18, 2014, 9:53:43 AM
    Author     : will
    Description:
        Purpose of the stylesheet follows.
*/

*{
  margin: 0px;

}
body{
  background-color: black;
}




#container{
  color: black;
  margin: 50px auto;
  border: solid black 2px;
 text-align:center;
  width: 700px;
  height: 540px;
  background-image: url('http://www.kodemi.com/images/full/2013/12/20/white-background-wallpaper-image-pics-hdwallpc-White-Background-Wallpaper-Image-Pics.jpg');


}


#block{
  width: 300px;
  color: black;
  margin: 36px auto;

}



h3.header{
  color: black;
  font-size:25px;
  margin: 30px 30px 5px;

}

#border{
  width: 400px;
  border-top: solid black 1px;
  margin: auto;

}

#box p{
  margin: 20px;

}



#box input{
  margin-left: 10px;
}

Answer 1

您可以在字段名称中添加标签标签，设置宽度，并将文本右对齐以确保所有输入框始于同一点：

label {
    width: 115px;
    display: inline-block;
    text-align: right;
}

http://jsfiddle.net/Kiaaanabal/dQLzy/

希望这有帮助！

Answer 2

U可以使用表格标签代替段落标签，并且可以轻松对齐输入字段，文本可以使用cellspacing和cellpadding进行更多修改。

<div id="box">
        <table>
            <tr>
                <td>Enter Name:</td>
                <td><input class="in" type="text" name="name"
                    value="${param.name}"></td>
            </tr>
            <tr>
                <td>Enter Age:</td>
                <td><input class="in" type="text" name="name"
                    value="${param.name}"></td>
            </tr>
            <tr>
                <td>Enter Address:</td>
                <td><input class="in" type="text" name="name"
                    value="${param.name}"></td>
            </tr>
            <tr>
                <td>Enter phone:</td>
                <td><input class="in" type="text" name="name"
                    value="${param.name}"></td>
            </tr>
        </table>
    </div>

这可能有所帮助。

Answer 3

simple just: input name should be inside label and make some width to id box. Just copy paste code below: 

HTML CODE:

<html>
    <head>
    </head>
    <body>


        <div id="container">
            <h3 class="header"> Welcome to the registration form </h3>
            <div id="border"> </div>


            <div id="box">

                <p> <label>Enter Name:</label> <input class="in" type="text" name="name" value="${param.name}"> </p>
                    <p><label> Enter Age:</label> <input class="in" type="text" name="name" value="${param.name}"> </p>
                        <p><label> Enter Address: </label><input class="in" type="text" name="name" value="${param.name}"> </p>
                            <p> <label>Enter phone: </label><input class="in" type="text" name="name" value="${param.name}"> </p>

                            </div><!--box -->


                        </div><!--container -->
                    </body>
                </html>

CSS CODE:

/* 
Document   : style
Created on : Jan 18, 2014, 9:53:43 AM
Author     : will
Description:
Purpose of the stylesheet follows.
*/

*{
    margin: 0px;

}
body{
    background-color: black;
}




#container{
    color: black;
    margin: 50px auto;
    border: solid black 2px;
    text-align:center;
    width: 700px;
    height: 540px;
    background-image: url('http://www.kodemi.com/images/full/2013/12/20/white-background-wallpaper-image-pics-hdwallpc-White-Background-Wallpaper-Image-Pics.jpg');


}


#block{
    width: 300px;
    color: black;
    margin: 36px auto;

}



h3.header{
    color: black;
    font-size:25px;
    margin: 30px 30px 5px;

}

#border{
    width: 400px;
    border-top: solid black 1px;
    margin: auto;

}

#box p{
    margin: 20px; text-align:left;

}

#box label { width:95px; float:left }

#box { width:300px; /* or 42% width*/  margin:0px auto; }

#box input{
    margin-left: 10px;
}

如何在P和居中文本上对齐HTML定位和输入

3 个答案: