Question

每个人，

我希望在html代码中有一个登录表单边框，但是使用我当前的代码，它不是我想要的。我希望边框真正封装中心元素。知道怎么做吗？

结果如下：

enter image description here

我的代码：

的index.php：

<?php include "base.php"; ?>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!DOCTYPE>

<html>
<title>Shopping List</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</html>
<head>

</head>
<body bgcolor=#878787>

<div class="form">
    <center><h1>Please enter your login details</h1></center>
    <form>
        <label for="username">Username:</label><input type="text" name="username" id="username" >     </br>
        <label for="password">Password:</label><input type="text" name="password" id="password" >     </br>
        <input type="submit" name="login" id="login" value="Login">
    </form>
</div>

</body>

的style.css：

div.form{
text-align: center;

border: 5px solid;
border-radius: 25px;
box-shadow: 5px 5px 5px #888888;
}

.form label, .form input{
display: inline-block;
}

.form input {
width: 150px;
}

.form label {
width: 100px;
}

input {
border: 5px solid;
border-radius: 25px;
box-shadow: 5px 5px 5px #888888;

font-family: Trebuchet MS;
border: 1px solid #CCC;
margin-bottom: 5px;
background-color: #FFF;
padding: 2px;
}

input[type="submit"] {
display: inline-block;
position: relative;
margin-top: 5px;
width: 150px;
height: 30px;
left: 50px; 
}
input:hover {
border: 1px solid #222;
background-color: #EEE;
}

Answer 1

您可以通过减小容器的宽度和居中来实现这一目标（div.form）像

这样的东西

display:inline-block;
margin: 0 auto;

Answer 2

尝试添加

.form{
   max-width:320px;
   margin:0 auto;
}

Answer 3

你可以使用CSS在你想要的任何地方放置边框。对于我的例子，我将使用纯黑色边框包围用户名和密码字段：

HTML：

   <div class="form">
        <center><h1>Please enter your login details</h1></center>
        <form>
            <div class="border"> 
          <label for="username">Username:</label><input type="text" name="username" id="username" >     </br>
            <label for="password">Password:</label><input type="text" name="password" id="password" >     </br>
            </div>
            <input type="submit" name="login" id="login" value="Login">
        </form>
    </div>

上面HTML中唯一的变化就是我把div放在了用户名和密码部分，所以css知道哪个html要边界。

然后我写了这个简单的CSS：

.border {1px solid black;}

这里有一个网站，会告诉你他们的边框风格。

http://www.w3schools.com/css/css_border.asp

Answer 4

您可以通过稍微更新CSS来解决您的问题。将这些规则更改为以下CSS规则：

div.form {
   text-align: center;
}
form {
   padding: 20px;
   display: inline-block;
   border: 5px solid;
   border-radius: 25px;
   box-shadow: 5px 5px 5px #888888;
}

然后将您的HTML更新为以下HTML：

<div class="form">
   <form>
      <center><h1>Please enter your login details</h1></center>
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" />
      <br />
      <label for="password">Password:</label>
      <input type="text" name="password" id="password" />
      <br />
      <input type="submit" name="login" id="login" value="Login">
   </form>
</div>

您将获得以下结果：

enter image description here

我希望能帮到你。

CSS居中的边界

4 个答案: