我想在我的网页中心显示我的Skider（Img），但它没有正确显示。它在左侧显示更多＆amp;也没有完全显示它。有人能帮我吗。提前致谢。 我的标题部分也没有显示，滑块问题。
这是我的代码。
<div class="Container">
<div class="Header">
<div class="Slider">
<div class="Center">
<div class="Chat">
<div class="Chat_Icon">
<img src="Slicing & Images/Chat_Icon.png" />
</div>
<div class="Live">
<h5> Live Chat 24/7 </h5>
</div>
<div class="Number">
<h5> +1 970 950 7000 </h5>
</div>
</div>
<div class="Social_Media">
<div class="Follow_Us">
<h5> Follow Us On: </h5>
</div>
<div class="Social_Icons">
<img src="Slicing & Images/Fb_Icon.png" />
</div>
<div class="Social_Icons">
<img src="Slicing & Images/Twi_Icon.png" />
</div>
<div class="Social_Icons">
<img src="Slicing & Images/Goo+_Icon.png" />
</div>
</div>
<div class="Company_Logo">
<div class="Logo">
<img src="Slicing & Images/Logo.png" />
</div>
<div class="Name">
<h2> ORICOM </h2>
<h3> Creative </h3>
<h4> Group </h4>
</div>
</div>
<div class="Company_Info">
<div class="Company_Type">
<h1> CREATIVITY, INOVATION, SIMPLICITY </h1>
</div>
<div class="Company_Detail">
<p> Everything you imagine, from dream to Reality, from Imagination to Completeness ORICON Creative Group is a plateform for your evey wish, every idea to become true. Because we simple beleive into “You Imagine, We Done” </p>
</div>
<div class="Read_Btn">
<input type="button" value="READ MORE" />
</div>
</div>
</div>
<div class="Navigations">
<div class="Navigation_Menu">
<div class="Navigation_style">
<img src="Slicing & Images/Nav_Box.png" />
</div>
<div class="Navigation_style">
<img src="Slicing & Images/Nav_Box.png" />
</div>
<div class="Navigation_style">
<img src="Slicing & Images/Nav_Box.png" />
</div>
<div class="Navigation_style">
<img src="Slicing & Images/Nav_Box.png" />
</div>
<div class="Navigation_style">
<img src="Slicing & Images/Nav_Box.png" />
</div>
<div class="Navigation_style">
<img src="Slicing & Images/Nav_Box.png" />
</div>
<div class="Navigation_style">
<img src="Slicing & Images/Nav_Box.png" />
</div>
<div class="Navigation_list">
<ul>
<li> <a href=""> 1 </a> </li>
<li> <a href=""> 2 </a> </li>
<li> <a href=""> 3 </a> </li>
<li> <a href=""> 4 </a> </li>
<li> <a href=""> 5 </a> </li>
<li> <a href=""> 6 </a> </li>
<li> <a href=""> 7 </a> </li>
</ul>
</a>
<div class="Navigation_list">
<ul>
<li>
<a href="" >
<h3> HOME </h3>
<h4> Who We Are </h4>
</a>
</li>
<li>
<a href="" >
<h3> ABOUT </h3>
<h4> What We Do </h4>
</a>
</li>
<li>
<a href="" >
<h3> COMPANY </h3>
<h4> Our Brief History </h4>
</a>
</li>
<li>
<a href="" >
<h3> SRRVICES </h3>
<h4> Our Expertices </h4>
</a>
</li>
<li>
<a href="" >
<h3> PROJECTS </h3>
<h4> Our Creative Work </h4>
</a>
</li>
<li>
<a href="" >
<h3> OUR BLOG </h3>
<h4> Wht’s going on? </h4>
</a>
</li>
<li>
<a href="">
<h3> CONTACTS </h3>
<h4> Keep in touch with us </h4>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
body {
float: left;
margin: 0;
padding: 0;
width: 100%;
font-family: 'Titillium Web', sans-serif;
}
.Container {
float: left;
margin: 0;
padding: 0;
width: 100%;
}
.Slider {
background-image: url("Slicing & Images/Slider.png");
background-repeat:no-repeat;
float: left;
width: 100%;
}
.Header {
background-color: #7f7f7f;
float: left;
height: 60px;
width: 100%;
}
.Center {
float: left;
margin: 0 10%;
width: 80%;
}
.Chat {
float: left;
margin: 1% 0;
width: 30%;
}
.Chat_Icon {
float: left;
margin: 2% 0 0;
width: 6%;
}
.Chat_Icon > img {
float: left;
width: 100%;
}
.Live {
float: left;
margin: 0 0 0 3%;
width: 85%;
}
.Live > h5 {
color: #fff;
float: left;
margin: 0;
width: 100%;
}
.Number {
float: left;
margin: 0 0 0 0;
width: 100%;
}
.Number > h5 {
color: #fff;
float: left;
margin: 0;
width: 100%;
}
.Social_Media {
float: left;
margin: 0 0 0 30%;
width: 40%;
}
.Follow_Us {
float: left;
margin: 0 0 0 50%;
width: 30%;
}
.Follow_Us > h5 {
color: #fff;
float: left;
text-align: center;
width: 100%;
}
.Social_Icons {
float: left;
margin: 8% 1%;
width: 4%;
}
.Social_Icons > img {
float: left;
width: 100%;
}
.Company_Logo {
float: left;
width: 100%;
}
.Logo {
float: left;
margin: 0 0 0 50%;
width: 4%;
}
.Logo > img {
float: left;
width: 100%;
}
.Name {
float: left;
margin: -2% 0 0 4%;
width: 30%;
}
.Name > h2 {
color: #c15dc3;
float: left;
width: 0;
}
h3 {
color: #90d28f;
font-size: 20px;
margin: 20% 0 0;
width: 20%;
}
h4 {
color: #99d7e6;
float: left;
font-size: 20px;
margin: -11.9% 0 0 33%;
width: 20%;
}
.Company_Info {
background-color: #7f7f7f;
float: left;
height: 200px;
margin: 0 10%;
opacity: 0.4;
width: 80%;
}
.Company_Type {
float: left;
margin: 0 15%;
width: 70%;
}
h1 {
color: #9dde9c;
float: left;
font-size: 20px;
text-align: center;
width: 100%;
}
.Company_Detail {
float: left;
margin: 0 10%;
width: 80%;
}
p {
color: #fff;
float: left;
font-size: 13px;
margin: 0;
text-align: center;
width: 100%;
}
.Read_Btn {
float: left;
margin: 0 25%;
width: 50%;
}
input {
background-color: #fff;
color: #c15dc3;
float: left;
height: 30px;
margin: 0 25%;
text-align: center;
width: 30%;
}
.Navigations {
float: left;
width: 100%;
}
.Navigation_Menu {
float: left;
width: 100%;
}
.Navigation_style {
float: left;
width: 14.28%;
}
.Navigation_style > img {
float: left;
width: 100%;
}
.Navigation_list {
float: left;
width: 100%;
}
ul {
float: left;
margin: 0;
width: 90%;
}
li {
float: left;
list-style: outside none none;
width: 14%;
}
a {
color: #c15dc3;
float: left;
text-decoration: none;
width: 100%;
}
答案 0 :(得分：0)
我在CSS类中做了一些更改，检查this fiddle
的结果HTML：
<div class="container">
<div class="slider clearfix">
<div>
Slide 1
</div>
<div>
Slide 2
</div>
<div>
slide 3
</div>
</div>
</div>
CSS：
.clearfix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.container {
border: 1px solid grey;
padding: 10px;
width: 90%;
}
.slider {
border: 1px solid red;
margin: 0 auto;
padding: 5px;
width: 90%
}
.slider div {
border: 1px solid green;
float: left;
margin: 0 atuo;
padding: 10px;
width: 28.50%
}