CSS内联块不换行
[英]CSS inline block not making a newline
问题描述
Hi am trying make this web page but am facing this problem am using inline block but its not making a new line it just keep on going in a straight line i need it to make a newline once it reaches MainPage padding limit how can i do this i thought inline automatically makes a newline 
嗨，我正在尝试制作此网页，但使用内联块却遇到了这个问题，但它并未制作新行，它一直沿直线前进，一旦达到MainPage填充限制，我需要它来换行我认为内联会自动换行
Thank you. 谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#MainPage {
padding-left: 230px;
padding-right: 230px;
}
body > #body-container {
height: auto;
min-height: 100%;
}
.pageData {
display: table;
table-layout: fixed;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.PageInner {
display: table-row;
}
.PageCard {
margin: 0 0 10px;
border: 0;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.gridItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
width: 196px;
word-wrap: break-word;
}
#Pagebox {
border-bottom: 1px solid #e2e2e2;
padding-left: 18px;
padding-right: 18px;
}
.UL-Slider {
width: 100%;
overflow: visible;
position: relative;
left: 0;
white-space: nowrap;
font-size: 0;
vertical-align: top;
-moz-transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
}
.MovieItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
width: 196px;
word-wrap: break-word;
}
.Video-CFix {
font-size: 11px;
color: #767676;
position: relative;
}
.LockUp-Thumbnail {
margin-bottom: 4px;
}
.VideoThumb {
font-size: 0;
}
.VideoTitle {
margin-right: 20px;
font-size: 13px;
margin-bottom: 1px;
max-width: 196px;
}
</style>
</head>
<body>
<div id="body-container">
<div id="MainPage">
<div class="pageData">
<div class="PageInner">
<div class="PageCard">
<div class="gridItem">
<div id="Pagebox">
<ul class="UL-Slider">
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2016-06-12 19:08:14
I have modified your css, you have to remove whitespace: nowrap from .UL-Slider and remove width from .gridItem. 我已经修改了您的CSS，您必须删除空白：.UL-Slider中的nowrap并删除.gridItem中的宽度。 Also reduce padding from #MainPage 同时减少来自#MainPage的填充
#MainPage { padding-left: 100px; padding-right: 100px; } body > #body-container { height: auto; min-height: 100%; } .pageData { display: table; table-layout: fixed; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } .PageInner { display: table-row; } .PageCard { margin: 0 0 10px; border: 0; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); -moz-box-sizing: border-box; box-sizing: border-box; } .gridItem { display: inline-block; margin-right: 10px; vertical-align: top; word-wrap: break-word; } #Pagebox { border-bottom: 1px solid #e2e2e2; padding-left: 18px; padding-right: 18px; } .UL-Slider { width: 100%; overflow: visible; position: relative; left: 0; white-space: normal; font-size: 0; vertical-align: top; -moz-transition: left .3s ease-in-out; -webkit-transition: left .3s ease-in-out; transition: left .3s ease-in-out; } .MovieItem { display: inline-block; margin-right: 10px; vertical-align: top; width: 196px; word-wrap: break-word; } .Video-CFix { font-size: 11px; color: #767676; position: relative; } .LockUp-Thumbnail { margin-bottom: 4px; } .VideoThumb { font-size: 0; } .VideoTitle { margin-right: 20px; font-size: 13px; margin-bottom: 1px; max-width: 196px; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS内联/阻止问题 - CSS inline/block issue
内联块 css - inline-block css
使中心成为嵌入式块 - Making center a inline-block
CSS Display Inline 块不显示内联 - CSS Display Inline block is not displaying inline
固定宽度的CSS内联块 - css inline block with fixed width
CSS浮动/内联块问题 - CSS float / inline block issue
CSS和显示：内联块 - CSS and display: inline-block
CSS内联块转换 - CSS inline-block transitions
Css块和内联元素合二为一 - Css block and inline element in one
显示：inline-block in CSS - display: inline-block in CSS
相关标签