Question

所以我目前正在为朋友/客户开发项目，我在设置适用于大多数分辨率的页面时遇到问题，例如，如果有人在1680 x 1050,1920 x 1080或其他任何地方打开网站在页面之间或更高的页面将工作，但显然大多数元素将移动，也不会重新调整大小。我的客户在他的笔记本电脑上打开了页面，我创建的导航栏离屏幕一半。这是我的电脑和他的照片。

我电脑上的照片（1680 x 1050） - http://gyazo.com/fa2fc9ee489c7059f8ba50e97057ce93

他的笔记本电脑上的照片 - http://gyazo.com/2fe8652be408925ce7a322a1638cfed8

<style>
.btn { width: 200px;}
.fixedbtns { position: absolute; margin-left: -250px; margin-top: -150px; }
.textleft  { text-align: left; border: 0; margin: 10px;}
.relative  { position: relative; }
#container { width: 400px; position: relative; }
</style>
<h2>Our Services</h2>
Strategy 4 Growth offers a variety of business consulting services to 
organisations who have not achieved their growth ambitions and / or capabilities 
and we can assist clients with specific strategic analysis, advice, leadership 
and strategy implementation and review. In any case the services offered will be 
tailored to meet specific customer requirements but are likely to contain 
elements of the individual services listed here.

<div class="fixedbtns">[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section1"]Business Growth Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section2"]Operating Model Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section3"]Digital Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section4"]IT Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section5"]Cloud Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section6"]Business Transformation[/button] 
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section7"]UK / EMEA Market Entry Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section8"]Business Process Outsourcing (BPO)[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section9"]Sales and Marketing Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section10"]Strategic Planning[/button]

这是代码，它是在wordpress页面文本编辑器中完成的，目前在内部执行大部分CSS按钮，现在更容易编辑。

Answer 1

.fixedbtns { position: absolute; margin-left: -250px; margin-top: -150px; }

不要绝对定位东西，或者导致它们没有响应，并且在各种屏幕分辨率下看起来很奇怪 - 在这种情况下，由于-250px的部分，它会跨越屏幕。

相反，请查看responsive web design。

HTML，CSS，定位和解决方案

1 个答案: