頁面寬度大於視口，右側為空白

Question

我的頁面寬度在右邊太長。 我不知道是什么使它不對稱。 我可能會使用許多“ position：relative”，以使事物變得美觀和對齊，因為我沒有編寫任何其他方式的編碼。

這是我的樣子：

打印1 打印2

這是我的代碼：

 <script src="jQueryUI/external/jquery/jquery.js"></script> <script src="jQueryUI/jquery-ui.js"></script> <script src="jQueryUI/jquery-ui.css"></script> <script> $(function() { $( ".draggable" ).draggable({ axis: 'x', containment: [-234,0,450,0] }); }); </script> <script> $( "*", document.body ).click(function( event ) { var offset = $( "#circle" ).offset(); event.stopPropagation(); var conta = (offset.left - 752)/3.42; var posFinal = Math.round( conta ); $( "#luc" ).text( posFinal + "%" ); }); </script> 

 .draggable { width: 700px; height: 0px; margin: 0px auto; position: relative; } #bar { width: 350px; height: 12px; background-color: #ff0a00; border-right: 350px solid #00b4ff; margin: 0px auto; border-radius: 5px; } #circle { position: relative; top: -15px; width: 18px; height: 18px; border-radius: 50%; background: black; margin: 0px auto; } #discordo { position: relative; top: 65px; left: -386px; font-weight: bold; } #concordo { position: relative; top: 31.8px; left: 390px; font-weight: bold; } #organizado { position: relative; top: -70px; } 

 <form method="post" action="x.php" id="questions"> <h3>Pergunta 1</h3> <p>Maconha deveria ser legalizada para uso recreacional</p> <div id="organizado"> <p id="discordo">Discordo</p> <p id="concordo">Concordo</p> <div id="bar"> </div> <div class="draggable ui-widget-content"> <div id="circle"> </div> </div> <div> </div> <p id="luc"></p> 

Answer 1

沒有足夠的html和css代碼來確定是什么原因造成的，但是嘗試通過將以下內容放入css文件中，將overflow-x:hidden添加到整個文檔中：

html, body {
    overflow-x:hidden;
}

溢出屬性指定如果內容溢出元素的框會發生什么。 將其設置為隱藏將剪切所有多余的空間並使它不可見。 overflow-x將使您無法水平滾動