html - 为什么我的 slider 在我的网页中显示不正确

Question

我想在我的网页中央显示我的 Skider (Img)，但它没有正确显示。它更多地显示在左侧，也没有完全显示。有人能帮我吗。提前致谢。我的标题部分也没有显示，有 slider 问题。

这是我的代码。

<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%;
}

Answer 1

我在 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%
}