极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册页满意度调查</title>
<link type="text/css" rel="stylesheet" href="css\JDsurvey.css">
</head>
<body>
<div id="inner-content">
<div id="header">
<div id="header-top">
<h1>注册页满意度调查</h1>
</div>
<div id="header-bottom">
<p>
尊敬用户您好：
<br>
为了给您提供更加完善的服务，我们希望收集并了解您在页面的使用情况。对您的配合和支持表示衷心的感谢！
</p>
</div>
</div>
<div id="content">
<div class="A">
<span class="A">A</span>
<br> <br>
<form action="" method="POST">
<div>
<label class="questiontext">
<span class="asterisk">
*
</span>
您对注册页整体满意度如何？
</label>
</div>
<div>
<p class="selection">
<li>
<input type="radio" name="satisfaction" id="verycontent">
<label for=""> 非常满意</label>
</li>
<br>
<input type="radio" name="satisfaction" id="content">
<label for=""> 满意</label>
<br>
<input type="radio" name="satisfaction" id="general">
<label for=""> 一般</label>
<br>
<input type="radio" name="satisfaction" id="notcontent">
<label for=""> 不满意</label>
<br>
<input type="radio" name="satisfaction" id="verynotcontent">
<label for=""> 非常不满意</label>
</p>
</div>
</form>
<form action="" method="POST">
<div>
<div>
<label for="">您对注册页有什么想法，请大声说出来吧！（例如：哪里有问题，哪些功能做得不够好等）</label>
</div>
<div>
<input type="text" id="comment">
</div>
</div>
</form>
<div action="" method="POST" class="user_information">
</form>
<div>
<p>
<input type="submit" value="提交">
<!-- value的值会出现在按钮上方 -->
</p>
</div>
</div>
</div>
</body>
</html>上为html代码，下为css代码
body{
font-size: 12px;
line-height: 120%;
margin: 8px;
}
div#inner-content{
border-spacing: 1px;
margin: 20px auto 40px auto;
width: 75%;
}
/*
form{
display: table;
/* 把表单当作table */
/* border-spacing: 1px;
margin: 20px auto 40px auto;
width: 75%; */
/* form div{
display: table-row;
} */
div#header{
margin: 0 auto;
width: 100%;
padding-top: 1px;
}
div#header-top{
border-bottom: 2px solid #e33b3d;
padding-bottom:10px;
color: #666;
text-align: center;
height: 43px;
overflow: hidden;
background: url(../img/logo-w-s.png) no-repeat 0 -10px;
background-size: 165px auto;
/* margin: 0;
padding: 0; */
}
div#header-top h1{
text-align: left;
margin-left: 190px;
font-size: 22px;
font-family: "Microsoft Yahei";
font-weight: normal;
padding-bottom: 10px;
line-height: 26px;
}
div#header-bottom{
text-align: left;
padding: 30px 65px 15px 35px;
line-height: 25px;
}
div#header-bottom p{
margin:0px;
}
/* div.A,div.user_information{
width: 100%;
margin: 0 0 2px 0;
border: 0 none;
border-collapse: collapse;
background-color: #fff;
border-spacing: 0;
} */
form{
display: table;
width: 100%;
margin: 0 auto 10px auto;
border: 1px solid #cce8ff;
padding: 1px;
background-color: #FFFFFF;
border-spacing: 0;
}
form div{
display:table-row;
}
form p{
display: table-cell;
}
div.A span.A{
font-size: 16px;
/* font-family: ����; */
font-weight: bold;
text-align: left;
/* background-color: blue; */
}
label.questiontext{
display:table-cell;
font-family: verdana;
font-size: 12px;
font-weight: bold;
background-color: #EEF6FF;
text-align: left;
padding: 6px 10px;
margin: 0;
}
span.asterisk{
color: red;
font-size: 9px;
font-family: verdana;
margin-right: 5px;
}
p.selection{
display: table-cell;
padding: 11px 24px 16px 37px;
text-align: left;
line-height: 0px;
}我将form以table展现，div以table-row展现，p以table-cell元素展现，请问为何不能在一个单元格里插入ul列表，如下图所示反而会将列表分隔成另一列，求解，不胜感激，静候答复为盼。
你布局也稍显奇怪，你换成div就好了。