gpt4 book ai didi

html - CSS居中边框

转载 作者:太空宇宙 更新时间:2023-11-04 03:34:26 25 4
gpt4 key购买 nike

大家好

我希望在 html 代码中的登录表单周围有一个边框,但是对于我当前的代码,这并不是我想要的。我希望边框真正封装居中元素。知道怎么做吗?

结果是这样的:

enter image description here

我的代码:

索引.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>

样式.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;
}

最佳答案

尝试添加

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

关于html - CSS居中边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25771110/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com