Html 为什么我的滑块在我的网页中显示不正确_Html_Css

Html 为什么我的滑块在我的网页中显示不正确

html css

Html 为什么我的滑块在我的网页中显示不正确,html,css,Html,Css,我想在我的网页中央显示我的Skider（Img），但它没有正确显示。它更多地显示在左侧&也没有完全显示。有人能帮我吗。提前谢谢。此外，我的标题部分没有显示，存在滑块问题这是我的密码 <div class="Container"> <div class="Header"> <div class="Slider"> <div class="Center"> <div class="Chat"> <div clas

我想在我的网页中央显示我的Skider（Img），但它没有正确显示。它更多地显示在左侧&也没有完全显示。有人能帮我吗。提前谢谢。此外，我的标题部分没有显示，存在滑块问题

这是我的密码

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


全天候直播聊天
+1 970 950 7000 
请继续关注我们：
奥里科姆
创造性的
团体
创造性、创新性、简单性
你所想象的一切，从梦想到现实，从想象到完整，ORICON创意团队都是一个平台，让你的每一个愿望、每一个想法都成为现实。因为我们相信“你想象，我们做到了”

























身体{
浮动：左；
保证金：0；
填充：0；
宽度：100%；
字体系列：“titilliumweb”，无衬线；
}
.集装箱{
浮动：左；
保证金：0；
填充：0；
宽度：100%；
}
.滑块{
背景图像：url（“Slicing&Images/Slider.png”）；
背景重复：无重复；
浮动：左；
宽度：100%；
}
.标题{
背景色：#7f7f7f；
浮动：左；
高度：60px；
宽度：100%；
}
.中心{
浮动：左；
利润率：0.10%；
宽度：80%；
}
.聊天{
浮动：左；
利润率：1%0；
宽度：30%；
}
.Chat_图标{
浮动：左；
利润率：2%0；
宽度：6%；
}
.Chat_图标>img{
浮动：左；
宽度：100%；
}
.活{
浮动：左；
利润率：03%；
宽度：85%；
}
.现场>h5{
颜色：#fff；
浮动：左；
保证金：0；
宽度：100%；
}
.号码{
浮动：左；
保证金：0；
宽度：100%；
}
.编号>h5{
颜色：#fff；
浮动：左；
保证金：0；
宽度：100%；
}
.社交媒体{
浮动：左；
利润率：0.30%；
宽度：40%；
}
.跟我们来{
浮动：左；
利润率：0.50%；
宽度：30%；
}
.跟随我们>h5{
颜色：#fff；
浮动：左；
文本对齐：居中；
宽度：100%；
}
.社交图标{
浮动：左；
利润率：8%1%；
宽度：4%；
}
.Social_Icons>img{
浮动：左；
宽度：100%；
}
.公司标志{
浮动：左；
宽度：100%；
}
.标志{
浮动：左；
利润率：0.50%；
宽度：4%；
}
.Logo>img{
浮动：左；
宽度：100%；
}
.姓名{
浮动：左；
利润率：-2%04%；
宽度：30%；
}
.Name>h2{
颜色：#c15dc3；
浮动：左；
宽度：0；
}
h3{
颜色：#90d28f；
字体大小：20px；
利润率：20%0；
宽度：20%；
}
h4{
颜色：#99d7e6；
浮动：左；
字体大小：20px；
利润率：-11.9%0.33%；
宽度：20%；
}
.公司信息{
背景色：#7f7f7f；
浮动：左；
高度：200px；
利润率：0.10%；
不透明度：0.4；
宽度：80%；
}
.公司类型{
浮动：左；
利润率：0.15%；
宽度：70%；
}
h1{
颜色：#9dde9c；
浮动：左；
字体大小：20px；
文本对齐：居中；
宽度：100%；
}
.公司详情{
浮动：左；
利润率：0.10%；
宽度：80%；
}
p{
颜色：#fff；
浮动：左；
字体大小：13px；
保证金：0；
文本对齐：居中；
宽度：100%；
}
.Read_Btn{
浮动：左；
利润率：0.25%；
宽度：50%；
}
输入{
背景色：#fff；
颜色：#c15dc3；
浮动：左；
高度：30px；
利润率：0.25%；
文本对齐：居中；
宽度：30%；
}
.航行{
浮动：左；
宽度：100%；
}
.导航菜单{
浮动：左；
宽度：100%；
}
.导航风格{
浮动：左；
宽度：14.28%；
}
.Navigation_style>img{
浮动：左；
宽度：100%；
}
.导航列表{
浮动：左；
宽度：100%；
}
保险商实验室{
浮动：左；
保证金：0；
宽度：90%；
}
李{
浮动：左；
列表样式：外部无；
宽度：14%；
}
a{
颜色：#c15dc3；
浮动：左；
文字装饰：无；
宽度：100%；
}

我在CSS类中做了一些更改，请在

HTML:

你能把你的代码减少到一个最小的例子来说明这个问题吗？这将使人们更容易帮助你。你为什么要添加

float:left到所有的类？你能做一个片段还是一把小提琴？是可以的。你可以查看@Adarsh Mohan
<div class="container">
    <div class="slider clearfix">
        <div>
            Slide 1
        </div>
        <div>
            Slide 2
        </div>
        <div>
            slide 3
        </div>
    </div>
</div>

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