没有合适的资源?快使用搜索试试~ 我知道了~
HTML如何对齐多个表单中的文本框的实现
16 下载量 104 浏览量
2020-12-28
16:31:24
上传
评论
收藏 80KB PDF 举报
温馨提示
试读
2页
表单代码如图,还没有加入样式表,表单没有对齐,比较难看,但是HTML又没有提供表单对齐的标签或功能。 html源代码: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>massage-board</title> </head> <body> <form action=board.php> <fieldset> <p> <label for=title>title:</label> <inp
资源推荐
资源详情
资源评论
HTML如何对齐多个表单中的文本框的实现如何对齐多个表单中的文本框的实现
表单代码如图,还没有加入样式表,表单没有对齐,比较难看,但是HTML又没有提供表单对齐的标签或功能。
html源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>massage-board</title>
</head>
<body>
<form action="board.php">
<fieldset>
<p>
<label for="title" >title:</label>
<input type="text" id="title" name="title" align="left">
</p>
<p>
<label for="username">username:</label>
<input type="text" id="username" name="username" align="left">
</p>
<p>
<label for="messageContent">message content:</label>
<textarea id="messageContent" name="messageContent" cols="40" rows="5" align="left"></textarea>
</p>
<p>
<input type="submit">
</p>
</fieldset>
</form>
</body>
</html>
表单显示效果图片:
为了使表单对齐,在HTML中添加如下CSS代码,表单即可对齐:
<style>
fieldset{
background-color: #f1f1f1;
border: none;
border-radius: 2px;
margin-bottom: 12px;
overflow: hidden;
padding: 0 .625em;
}
label{
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 150px;
vertical-align: top;
}
资源评论
weixin_38526650
- 粉丝: 1
- 资源: 885
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功