让多个输入框对齐

界面展示

 代码

style.css

#div1{
    position:fixed;
    left:0px;
    right:0px;
    width:800px;
    margin-left:auto;
    margin-right:auto;top:100px;
}
#a {
    height:50px;
    border:1px solid rgb(230, 189, 189);
}

#a input {
    height:30px;
    border: 1px solid rgb(230, 189, 189);
    background-color: lavenderblush;
}

label{
    display: inline-block;
    padding: 3px 6px;
    text-align: right;
    width: 100px;
    vertical-align: top;
    text-align:right
}

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书信息添加</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div align="center" id="div1">
    <h1>添加图书</h1>
    <form action="Servlet?method=addBook" name="information" method="post" onsubmit="return check()">
        <div id="a">
            <label>编 号:</label>
            <input type="text" id="bid" name="bid"/>
        </div>
        <div id="a">
            <label>书  名:</label>
            <input type="text" id="bname" name="bname"/>
        </div>
        <div id="a">
            <label>作者名:</label>
            <input type="text" id="bwriter" name="bwriter"/>
        </div>
        <div id="a">
            <label>出版社:</label>
            <input type="text" id="bout" name="bout"/>
        </div>
        <div id="a">
            <label>可借阅数目:</label>
            <input type="text" id="bnum" name="bnum"/>
        </div>
        <div id="a">
            <button type="submit" class="but">保     存</button>
        </div>
        <div id="a">
            <a href="admin.jsp" class="txt">返回</a>
        </div>
    </form>
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/linmob/p/14149544.html