股利溢出到左

我在我的網站通過使用計算（50％+我想做的事情）爲中心定位的東西股利溢出到左

有時候我會想，使其50％ - 100像素或類似的東西，但有一個問題。在小瀏覽器屏幕上，div將離開屏幕左側。

如果它在右側溢出，那麼我很好，因爲滾動條會在那裏，但是如果div溢出到左邊則無法查看它。

html { 
 
    background: url("http://wallpapercave.com/wp/adsKXLw.png") no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
body { 
 
    overflow: scroll; 
 
    height: 100%; 
 
} 
 

 
.navbar div, .navbar div p { 
 
    position: fixed; 
 
} 
 

 
#huge { 
 
    width: 1100px; 
 
    height: 10000px; 
 
    position: absolute; 
 
    background-color: rgb(255, 153, 51); 
 
    background-color: rgba(255, 103, 48, 0.5); 
 
    left: calc(50% - 550px); 
 
    top: 0px; 
 
} 
 

 

 
#navbar-background { 
 
    width: 920px; 
 
    height: 110px; 
 
    border-radius: 70px; 
 
    top: 11px; 
 
    left: calc(50% - 460px); 
 
    background-color: rgb(255, 204, 128); 
 
    background-color: rgba(255,255,255, .2); 
 
} 
 

 
#home-div { 
 
    background-color: rgb(249, 162, 100); 
 
    width: 210px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    left: calc(50% - 430px); 
 
    top: 30px; 
 
    z-index: 2; 
 
    border-top: 1px white solid; 
 
    border-left: 1px solid white 
 
} 
 

 
#home-div-button { 
 
    background-color: rgb(200, 131, 78); 
 
    width: 215px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    z-index: 1; 
 
    top: 40px; 
 
    left: calc(50% - 425px); 
 
} 
 

 
#home-text { 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    top: 10px; 
 
    left: calc(50% - 415px); 
 
    font-size: 30px; 
 
    color: #FFFFFF; 
 
} 
 

 

 

 
#clan-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: calc(50%); 
 
    top: 40px; 
 
    border-radius: 10px 0px 0px 10px; 
 
} 
 

 
#clan-text { 
 
    left: calc(50% + 0px); 
 
    top: 26px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
    padding: 10.5px 0px 8px 7.5px; 
 
} 
 

 
#clan-div-2 { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: calc(50% + 100px); 
 
    top: 40px; 
 
    border-radius: 0px 10px 10px 0px; 
 
} 
 

 
#clan-text-2 { 
 
    left: calc(50% + 100px); 
 
    top: 26px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
    padding: 10px 11px 8px 14px; 
 
} 
 

 
#games-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: calc(50% + 230px); 
 
    top: 40px; 
 
    border-radius: 10px 0px 0px 10px; 
 
} 
 

 
#games-text { 
 
    font-size: 18px; 
 
    font-family: Comfortaa; 
 
    color: #FFFFFF; 
 
    top: 21px; 
 
    left: calc(50% + 230px); 
 
    padding: 15px 15px 15px 15px; 
 
} 
 

 
#more { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: calc(50% + 330px); 
 
    top: 40px; 
 
    border-radius: 0px 10px 10px 0px; 
 
} 
 

 
#more-text { 
 
    font-size: 12px; 
 
    font-family: Comfortaa; 
 
    color: #FFFFFF; 
 
    top: 27px; 
 
    text-align: center; 
 
    left: calc(50% + 330px); 
 
    padding: 12px 7.5px 12px 7.5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>The Own Clan Website</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
 
    <link href="style.css" rel="stylesheet" text="text/css"> 
 
    <link href="script-1.js" text="text/javascript"> 
 
    </head> 
 
    <body> 
 
    <div id="everything"> 
 
     <div id="huge"></div> 
 
     <div class="navbar"> 
 

 
     <div id="navbar-background"></div> 
 

 
     <div id="home-div"> 
 
      <p class="navbar-text" id="home-text">THe TITLE</p> 
 
     </div> 
 

 
     <div id="home-div-button"></div> 
 

 
     <div class="navbar-div" id="clan-div"> 
 
      <p class="navbar-text" id="clan-text">Stuff</p> 
 
     </div> 
 

 
     <div class="navbar-div" id="clan-div-2"> 
 
      <p class="navbar-text" id="clan-text-2">More stuff</p> 
 
     </div> 
 

 
     <div class="navbar-div" id="games-div"> 
 
      <p class="navbar-text" id="games-text">Thing</p> 
 
     </div> 
 
     
 
     <div class="navbar-div" id="more"> 
 
      <p class="navbar-text" id="more-text">Extra Stuff</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    </body> 
 
</html>

不斷放大，你會明白我的意思。

是否有任何東西可見，如果他們溢出到左邊？

來源

2017-03-23 BOBONA

當你只是水平居中某事（就像你的問題），最好只使用margin: 0 auto;就可以了 - 沒有別的。如果在另一個容器中，則應在兩個元素上使用position: relative。

div { 
 
    width: 1700px; 
 
    height: 100px; 
 
    background-color: #111111; 
 
    color: #f0f; 
 
    position: relative; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div>xxx</div> 
 
</body> 
 
</html>

來源

2017-03-24 00:48:52 Johannes

我用我的實際項目的片段。其中一部分溢出到左邊，你看不到 – BOBONA

因此，你有沒有試圖將'margin：0 auto'應用到你的項目中？ – Johannes

我的意思是再次看看我編輯過的代碼片段。 – BOBONA

股利溢出到左

回答

相關問題