会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133401个问题
JAVA 全系列/第十二阶段:消息中间件与高并发处理/RabbitMQ(旧) 38506楼
Python 全系列/第十六阶段:Python 爬虫开发/scrapy框架使用 38507楼
Python 全系列/第一阶段:Python入门/编程基本概念 38508楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/数组和数据存储 38510楼

老师我想请问一下为何我的商品详情展示区默认位置跟上面对不齐?需要怎么调?图片跟代码如下

1.css部分

/*导航框开始*/
.nav{
	height: 30px;
	background-color: #f1f1f1;
}

.warp{
	width: 1000px;
	margin: 0px auto;
}

.nav_ul1,.nav_ul2 li{
	float:left
}

.nav_ul1 li{
	float: left;
	line-height: 30px;
	margin-right: 20px;
}
 .nav_ul1 a,.nav_ul2 a,.nav_ul2 span{
 	font-size: 12px;
 	color: gray;
 }

.nav_ul2{
	float: right;
}
.nav_ul2 li,.nav_ul2 span{
	height: 30px;
	margin-left:10px;
}
.nav a:hover{
	color: red;
}
/*导航框结束*/
/*搜索框开始*/
.search{
	margin: 20px;
}
.search img{
	/*清除之前的样式(防止新的与之前的冲突)*/
	clear: both;
	float: left;
	
}
.search_div{
	float: right;
	margin-top: 20px;
	
}
.search_text{
	width: 265px;
	height: 21px;
	border: 3px solid #c91623;
	position: relative;
	left: 4px;
	top: -1px;
	
}
.search_but{
	width: 51px;
	height: 29px;
	background-color: #c91623;
	border: 0px;
	color: #ffffff;
}
/*搜索框结束*/

/*标题框开始*/
.title{
	margin-top: 130px;
}
.title h3{
	float: left;
	font-size: 27px;
	color: #c91623;
}
.title div{
	float: right;
	font-size: 14px;
	color: gray;
}
/*标题框结束*/

/*显示菜单的开始*/
.tips{
	margin-top: 165px;
	height: 50px;
	width: 1000px;
	background-color: #f1f1f1;
	border: 1px solid #E9E9E9;
}
.tips li{
	
	float: left;
	line-height: 50px;
	font-size: 12px;
	color: gray;
}
.tips li:nth-child(1){
	/*clear: both;*/
	width: 90px; border-top: 3px solid #c91623;
}
.tips li:nth-child(2){margin-left: 80px;}
.tips li:nth-child(3){margin-left: 450px;}
.tips li:nth-child(4){margin-left: 70px;}
.tips li:nth-child(5){margin-left: 110px;}
.tips li:nth-child(6){margin-left: 50px;}
/*显示菜单的结束*/

/*商品详情展示的开始*/
.info{
	width: 1000px;
	height: 125px;
	background-color: #fff4e8;
	border: 1px solid gray;
}
.info li{
	float: left;
	margin-top: 20;
}
.info_1{
	margin-left: 23px;
}
.info_2{
	margin-left: 15px;
	border: 1px solid gray;
}
/*商品详情展示的结束*/

2.html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东购物车</title>
		
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/jd.css"  />
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
		
		
		
	</head>
	<body>
		<!--导航开始-->
		<div class="nav">
			
			<div class="warp">
				<ul class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe69c</i>京东首页</a></li>
					<li><a href="">配送至:广州</a></li>
				</ul>
				
				<ul class="nav_ul2">
					<li><a href="">洋洋宝贝</a><span>|</span></li>
					<li><a href="">我的订单</a><span>|</span></li>
					<li><a href="">我的京东</a><span>|</span></li>
					<li><a href="">京东会员</a><span>|</span></li>
					<li><a href="">企业采购</a><span>|</span></li>
					<li><a href="">京东手机</a><span>|</span></li>
					<li><a href="">关注京东</a><span>|</span></li>
					<li><a href="">客户服务</a><span>|</span></li>
					<li><a href="">网站导航</a></li>
				</ul>
			</div>
			
		</div>
		
		<!--导航结束-->
		
		<!--搜索框开始-->
		<div class="search">
			
			<div class="warp">
				
				<img src="img/logo.jpg"  />
				
				<div class="search_div">
					
					<input type="text" class="search_text"/>
					<input type="button" value="搜索" class="search_but" />
					
				</div>
				
			</div>
			
		</div>
		
		<!--搜索框结束-->
		
		<!--标题开始-->
		<div class="title warp">
			<h3>全部商品</h3>
			<div>
				<span>配送到</span>
				<select>
					<option>海珠区</option>
					<option>天河区</option>
					<option>越秀区</option>
					<option>白云区</option>
					<option>荔湾区</option>
					<option>番禺区</option>
				</select>
				
			</div>
		</div>
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		<div class="tips warp">
			
			<ul>
				<li>
					<input type="checkbox"  />全选
				</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>
			
		</div>
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		<div class="info warp">
			<ul>
				<li class="info_1"><input type="checkbox" /></li>
				<li class="info_2"> <img src="img/img1.jpg" width="80px"/></li>
				<li>
					
伊利 纯牛奶250ml*24盒/箱(新年年货礼盒装)全脂营养早餐奶 
				</li>
				<li>
					【奥运品质】纯牛奶24盒
				</li>
				<li>¥76.80</li>
				<li>
					<button>-</button>
					<input type="text" name="" id="" value="1" />
					<button>+</button>
				</li>
				<li>¥76.80</li>
				<li>
					<a>删除</a> <br />
					<a>移入关注</a>
				</li>
			</ul>
		</div>
		<!--商品详情展示结束-->
	</body>
</html>

94edd2c5a4f64548cbed7d6e941b625.png

Python 全系列/第七阶段:网页编程基础/CSS 样式 38511楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 38512楼


image.png

07_redirect_demo.zip


老师,我这个308是什么意思


Python 全系列/第八阶段:轻量级Web开发利器-Flask框架/Flask视图基础和URL 38513楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/飞机大战小项目训练 38514楼

  1. Users代码

public class Users {
    private String username;
    private int userage;

    public Users(String username, int userage) {
        this.username = username;
        this.userage = userage;
    }

    public Users() {
    }

    @Override
    public boolean equals(Object o) {
        System.out.println("equals...");
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        Users users = (Users) o;
        return userage == users.userage &&
                Objects.equals(username, users.username);
    }

    @Override
    public int hashCode() {
        return Objects.hash(username, userage);
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public int getUserage() {
        return userage;
    }

    public void setUserage(int userage) {
        this.userage = userage;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                ", userage=" + userage +
                '}';
    }
}

2.TreeMap代码

public class TreeMapTest {
    public static void main(String[] args) {
        //实例化TreeMap
        Map<Users,String> map = new TreeMap<>();
        Users u1 = new Users("oldlu",18);
        Users u2 = new Users("admin",22);
        map.put(u1,"oldlu");
        map.put(u2,"admin");

        Set<Users> keys = map.keySet();
        for (Users key:keys){
            System.out.println(key+" -------------- "+map.get(key));
        }
    }
}

结果报错image.png

JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器(旧) 38515楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/面向对象详解和JVM底层内存分析 38517楼
JAVA 全系列/第十阶段:权限控制与安全认证/Shiro(旧) 38518楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/变量、数据类型、运算符 38519楼
Python 全系列/第八阶段:轻量级Web开发利器-Flask框架/Flask视图基础和URL 38520楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637