导航栏不会写，各个元素定位乱掉了，老师帮忙看看，下拉菜单跟小三角
为什么下拉菜单跟三角形都设置的float：right, 为什么三角形在下拉菜单的左边，是先设置float的元素在最左边吗，导航栏的元素也太杂了吧，有没有整齐点的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="registry"> <!-- 导航栏 --> <header> <div class="header_wrap"> <div class="header_logo">高铁客户服务中心<span> | </span><span>客户服务</span></div> <nav> <span>意见反馈 </span> <a href="#">163.com</a> <span> 您好，请</span> <a href="#">登录 </a> <span>| </span> <a href="#">注册 </a> <div class="menu"> <span>我的IMOOC</span> <ul class="menu-list"> <li>我的账户</li> <li>已完成订单（改/退）</li> <li>我的保险</li> <li>查看个人信息</li> <li>账户安全</li> <li>常用联系人</li> <li>重点旅客预约</li> <li>遗失物品查找</li> </ul> </div> <div class="arrow"></div> </nav> <div class="phone"> <a href="#">手机版</a> </div> </div> </header> <!-- 表单栏 --> <div class="content"> <h2>您现在的位置：<span>客运首页 > 注册</span></h2> <form action=""> <h2>账户信息</h2> <P><span>*</span><span>用 户 名：</span><input type="text" placeholder="用户名设置成功后不可更改"> <span class="prompt"></span></P> <P><span>*</span><span>登录密码：</span><input type="password" placeholder="6-20位字母、数字或符号"> <span class="prompt"></span></P> <P><span>*</span><span>确认密码：</span><input type="password" placeholder="再次输入您的登录密码"> <span class="prompt"></span></P> <P><span>*</span><span>姓 名：</span><input type="text" placeholder="请输入姓名"> <span><a href="#">姓名填写规则</a></span></P> <P><span>*</span><span>证件类型：</span><select name="credit" id="credit"><option value="二代身份证">二代身份证</option></select> <span class="prompt"></span></P> <P><span>*</span><span>证件号码：</span><input type="text" placeholder="请输入您的证件号码"> <span class="prompt"></span></P> <P><span></span><span>邮 箱：</span><input type="email" placeholder="请正确填写邮箱地址"> <span class="prompt"></span></P> <P><span>*</span><span>手机号码：</span><input type="text" placeholder="请输入您的手机号码"> <span class="prompt"></span></P> <P><span>*</span><span>旅客类型：</span><select name="people" id="people"><option value="成人">成人</option></select> <span class="prompt"></span></P> <p><input type="checkbox">我已阅读并同意遵守 <a href="">《中国铁路客户服务中心网站服务条款》</a></p> <input type="submit" id="sub" value="下一步"> </form> </div> <!-- 页脚 --> <footer> <p>关于我们 | 网站声明</p> <p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p> </footer> </div> </body> </html>
*{
margin:0;
padding: 0;
}
a{
text-decoration: none;
color: #000;
}
.registry{
width: 100%;
height:120px ;
font-family: "Microsoft Yahei";
}
/* 导航栏 */
header{
position: relative;
background: #efefef;
border-bottom:#2487c9 2px solid;
}
.header_wrap{
position: relative;
width: 1260px;
height: 120px;
margin: 0 auto;
}
.header_logo{
position: absolute;
display: inline-block;
width: 460px;
height: 100px;
background: url(../img/logo.png) left center no-repeat;
line-height: 100px;
font-size: 24px;
text-indent: 120px;
top:10px;
}
.header_logo>span:first-child{
font-size:28px;
font-weight: bolder;
}
.header_logo>span:last-child{
font-size:20px;
color:#66667b;
}
.header_logo>a:nth-child(2),.header_logo>a:nth-child(2){
color:#fb7403;
}
/* 导航条 */
nav{
position: absolute;
right:100px;
font-size: 16px;
line-height: 120px;
}
nav>a:nth-child(2),nav>a:nth-child(4){
color:#fb7403;
}
.menu{
float: right;
}
.menu-list{
display: none;
}
.menu-list li{
color: #000;
}
.menu:hover .menu-list{
display:block;
}
/* 小箭头 */
.arrow{
float: right;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 20px 20px;
border-color: #000 transparent transparent transparent;
}
.phone{
position: absolute;
right:0px;
display: inline-block;
width: 76px;
height: 24px;
margin: 0 atuo;
background: url(../img/未标题-1.png) left no-repeat;
background-size:auto 100%;
top:48px;
text-indent: 24px;
}
/* 表单栏 */
.content{
height: 800px;
width: 1260px;
background: #fff;
position: relative;
margin: 0 auto;
}
.content>h2{
font-size:18px;
line-height: 45px;
}
.content>h2>span{
font-size:18px;
color:#636363;
font-weight: lighter;
}
form{
width:1256px;
height: 630px;
border:#fb7403 solid 2px;
border-radius: 10px;
}
form>h2{
font-size: 20px;
line-height: 40px;
background: #fb7403;
border:#fb7403 solid 2px;
border-radius: 5px;
color:#fff;
text-indent: 18px;
}
form>p{
font-size: 14px;
line-height: 20px;
text-align: center;
margin: 16px 0;
}
form>p:first-of-type{
margin-top: 54px;
}
/* 设置各段文本长度，目的对其居中 */
form>p>span:nth-child(1){
color: red;
display: inline-block;
width: 80px;
text-align: right;
}
form>p>span:nth-child(2){
display: inline-block;
width: 70px;
text-align: right;
}
form>p>span:last-child{
display: inline-block;
width: 390px;
text-align: left;
}
form input,form select{
display: inline-block;
width: 210px;
}
/* 我已阅读并同意遵守 */
form>p:last-child{
font-size: 20px;
line-height: 20px;
}
input[type=checkbox]{
width: auto;
}
/* 下一步 */
input[type=submit]{
width: 230px;
height:38px;
color:#fff;
background:#fb7403;
border: none;
border-radius: 5px;
margin-top: 64px;
margin-left: 413px;
}
/* 页脚 */
footer{
color:#a19999;
text-align: center;
height: 100px;
width: 100%;
background: #dcdcdc;
border-top:#2487c9 2px solid;
padding-top: 20px;
}
footer>p{
font-size: 16px;
line-height:25px;
}24
收起
正在回答
2回答
同学你好，关于你的问题回答如下：
1、是想问为什么下拉菜单与小三角都设置了右浮动，但是小三角在下拉菜单的左边吗？这是因为按照从上到下的顺序下拉菜单（这个在上面，这个先浮动），先往右浮动，然后小三角在浮动，所以，下拉菜单在小三角的右边。建议：这里可以不设置浮动，直接设置为行内块使其在一行显示即可，例：
2、顶部导航项的空格 可以直接去掉，然后设置左右的外边距，调整左右间距即可。
3、主体部分，文字之间的 。比如：如下图；
建议：也可以直接去掉，然后给包裹文字的span添加一个相同的类（左侧的一列元素如图一，添加的类名部分如图二），
图一：
图二如下：
然后给这个类设置样式，设置为行内块，然后设置固定的宽度，最后设置其两端对齐，例：
同理，若是元素之间的空格，可以直接去掉，设置元素的左右外边距调整间距。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星