<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
/* 设置容器的样式 */
#container {
width: 600px;
height: 300px;
margin: 0 auto;
padding: 20px;
margin-top: 100px;
border: 1px solid #ccc;
background-color: #ffffff;
}
/* 设置左侧的样式 */
.left {
width: 150px;
text-align: left;
font-size: 20px;
{#margin-bottom: 20px;#}
}
/* 设置登录框输入框的样式 */
.login-box input[type="text"] {
width: 250px;
padding: 8px;
border: none;
border-radius: 4px;
background-color: #f0f0f0;
font-size: 16px;
margin-bottom: 10px;
}
/* 设置登录框输入框的样式 */
.login-box input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 7px 10px;
border-radius: 4px;
cursor: pointer;
width: 150px;
float: contour;
margin: auto;
}
.left-container{
float: left;
clear: left;
width: 45%;
margin: 0 10px;
top: auto;
/*容器内文本字符串自动换行*/
word-wrap: break-word;
}
.right-container {
float: right;
clear: right;
width: 45%;
margin: auto;
margin-top: 50px;
}
</style>
</head>
<body style="background-color: #e6e6e6">
<div id="container">
<div class="left-container">
<p>fffffffffffffffffkkkksssssssssssssssssssddddddddddddddddddddddd</p>
<p>xxxxxxxxxxxxx</p>
<p>ttttttttttrrrrrrrrrrrrrrr!</p>
</div>
<div class="right-container login-box">
<table>
<input type="text" placeholder="用户名"/>
</table>
<table>
<input type="text" placeholder="密码"/>
</table>
<table>
<input style="align-items: center" type="submit" value="登录"/>
</table>
</div>
</div>
</body>
</html>
