个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在我的元素中，我有一个网页主页。
我想设置一个更多链接到新闻页面。但越<a>链接超出了 lm_more `.
图片是这样的:
[![enter image description here][1]][1]
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web home page</title>
<link rel="stylesheet" href="css/format.css" media="screen">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/main.css" media="screen">
<link href="./css/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
<script src="js/jquery_min.js"></script>
<script src="js/jquery.svg.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="./js/video.js"></script>
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
</head>
<script>
$(document).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
history: 'love',
roundLengths : true,
parallax : true,
pagination: {
el: '.swiper-pagination',
clickable :true,
},
autoplay: {
stopOnLastSlide: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
paginationClickable :true,
})
})
</script>
<body style="background:url(./image/taiyi.jpg); height:100%;width:100%;background-repeat:no-repeat">
<style>
body{
margin:0;
}
.content{
margin-left:auto;
padding: 20px;
margin-right:auto;
width: 1400px;
height:850px;
background-color:white;
box-sizing: content-box;
}
.content .uprow{
width: 1400px;
height: 400px;
text-align:center;
border: 1px solid #e5e5e5;
}
.content .uprow .upright{
width: 600px;
height: 400px;
float: right;
background-color: white;
border: 1px solid #999;
}
.lm_title_con{
width: 600px;
height: 50px;
padding: 10px 20px;
}
.lm_title_con .lm_title{
width: 85px;
line-height: 45px;
height: 30px;
float: left;
line-height: 30px;
color: #3E6BC0;
font-size: 16px;
text-align: center;
border-bottom: 1px solid #3E6BC0;
}
.lm_more{
float: right;
height: 30px;
width: 30px;
line-height: 30px;
background-color: blue;
}
.lm_more a{
text-align: center;
color: red;
font-size: 13px;
text-decoration: none;
}
.swiper-container{
width: 595px;
height: 340px;
margin-top: 10px;
background-color: blue;
}
</style>
<div class="content">
<div class="uprow">
<div class="upright">
<div class="lm_title_con">
<div class="lm_title">
news
</div>
<div class="lm_more">
<a href="">more</a>
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:red"><a href='' ><img src='image/news/20190819-1png' style="width:595px;height:340px" alt=''></a></div>
<div class="swiper-slide" style="background-color:blue"><a href='../newsdetail/news20190729.html' ><img src='image/news/20190729-1jpg' style="width:595px;height:340px" alt=''></a></div>
<div class="swiper-slide" style="background-color:green"><a href='../newsdetail/news20190530.html' ><img src='image/news/20190530-1png' style="width:595px;height:340px" alt=''></a></div>
<div class="swiper-slide" style="background-color:yellow"><a href='../newsdetail/news20190529.html' ><img src='image/news/20190529-1png' style="width:595px;height:340px" alt=''></a></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</body>
</html>
但是当我评论内容div时，就可以了
<!--<div class="content">-->
<div class="uprow">
</div>
<!--</div>-->
结果图片如下:
但另一个<div>位置变了，首页大小乱了!谁能帮帮我？
最佳答案
请在“.lm_title_con”类选择器中添加“box-sizing”属性。
请尝试以下 CSS。
.lm_title_con {
width: 600px;
height: 50px;
padding: 10px 20px;
box-sizing: border-box; /* new added */
}
关于html - lm_more div为什么越多一个label，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57881415/
25
4
0
在我的元素中，我有一个网页主页。 我想设置一个更多链接到新闻页面。但越链接超出了 lm_more `. 图片是这样的: [![enter image description here][1]][1]
我是一名优秀的程序员,十分优秀！