更改頁面比例（按Ctrl + CTRL-），更是打破了頁面佈局

Question

當我改變頁面比例（CTRL - +，CTRL - -），更是打破了頁面佈局。

最後一項正在倒下。

幫我，我需要改變佈局到菜單正確縮放。

• 頁：
• 截圖：

Answer 1

因爲它看起來真的很重要，所以這裏有一個想法。

嘗試display:inline-block上的菜單項替換float: left（或display:inline-block;*display:inline;zoom:1如果你需要IE7支持）的父元素和white-space: nowrap。

您還可以刪除在HTML一些空白：

</li> 

<li class="level1" id="pm2"><a href="/computers/" class="level1">..</a> 

到：

</li><li class="level1" id="pm2"><a href="/computers/" class="level1">..</a> 

與同爲休息。

一旦你完成了，它應該看起來完全相同，但是應該修正縮放「問題」。

Answer 2

我看了一下你的頁面。我現在沒有時間玩代碼，但是如何將<ul> <li>.... </ul>中的菜單項替換爲<li>，並將float：left css替換爲可以在不使用float的情況下給出相同佈局的東西：left（like a <table>）？浮動：左側不適合頁面縮放時AFAIK

Answer 3

好吧，我不會爲你重做你的html，那裏有很多東西。但是，看，我已經嘗試了一些基本的表格東西，它看起來很有前景，現在如果我放大或縮小很多東西仍然對齊。

下面是你應該嘗試什麼：

在你的HTML頁面的代碼，你有一個<ul id="protoria_menu">其中包含所有你的上水平菜單（如<li>...</li>元素）。將ul替換爲表格，將其添加到<tr>，然後將每個主要的<li>....</li>元素更改爲<td>...</td>。通過這種方式，您可以在具有一行和多列的表格中放置菜單。

事情是這樣的：

<table id="protoria_menu"> 
<tr> 
<td id="pm1" class="level1"><a class="level1" href="/laptops-accessories/">Ноутбуки</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/laptops-accessories/laptops/"><strong>Ноутбуки</strong></a></li> 
     <li><a href="/laptops-accessories/tablet/"><strong>Интернет-планшеты</strong></a></li> 
     <li><a href="/apple/ipad/"><strong>Apple iPad</strong></a></li> 
     <li><a href="/laptops-accessories/sceys/">Сумки и чехлы</a></li> 
    </ul> 
    <ul class="pm-secondary"> 
     <li><a href="/laptops-accessories/soft/">Программное обеспечение</a></li> 
     <li><a href="/laptops-accessories/accessories/">Аксессуары</a> 
      <ul> 
       <li><a href="/laptops-accessories/accessories/p2609v3522/p2609v3523">USB кабели и адаптеры</a></li> 
       <li><a href="/laptops-accessories/accessories/p2609v3478">Аккумуляторы</a></li> 
       <li><a href="/laptops-accessories/accessories/p2609v3471">Блоки питания</a></li> 
       <li><a href="/laptops-accessories/accessories/p2609v3474">Подставки</a></li> 
       <li><a href="/laptops-accessories/accessories/">все аксессуары …</a></li> 
      </ul> 
     </li> 
     <li><a href="/apple/apple-accessories/p1885v2721">Аксессуары к APPLE</a></li> 
     <!-- li><a href="#">Гаджеты к APPLE</a></li --> 
     <li><a href="/computers/mouse/">Клавиатуры, мыши, коврики</a> 
      <ul> 
       <li><a href="/computers/mouse/p1411v3519/p1411v3570">Клавиатуры</a></li> 
       <li><a href="/computers/mouse/p1411v3519/p1411v3554">Мыши</a></li> 
     <li><a href="/computers/mouse/">все клавиатуры, мыши, <br>коврики …</a> 
      </li></ul> 
     </li> 
     <li><a href="/computers/external-hdd/">Внешние HDD</a></li> 
     <li><a href="/computers/external-hard-drives-ssd/">SSD накопители</a></li> 
     <li><a href="/computers/flash/">USB flash накопители</a></li> 
     <li><a href="/computers/clener/">Средства по уходу</a></li> 
     <li><a href="/laptops-accessories/mobileinternet/">Мобильный интернет</a></li> 
    </ul> 
    </div> 
</li> 
<li id="pm2" class="level1"><a class="level1" href="/computers/">Компьютеры</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/computers/monoblock/"><strong>Моноблоки</strong></a></li> 
     <li><a href="/computers/desktops/"><strong>Компьютеры</strong></a></li> 
     <li><a href="/computers/displays/"><strong>Мониторы</strong></a></li> 
     <li><a href="/computers/external-hdd/">Внешние HDD</a></li> 
     <li><a href="/computers/external-hard-drives-ssd/">SSD накопители</a></li> 
     <li><a href="/computers/flash/">USB flash накопители</a></li> 
     <li><a href="/computers/nas/">Сетевые накопители (NAS)</a></li> 
     <li><a href="/computers/networking/">Сетевое оборудование</a></li> 
    </ul> 
    <ul class="pm-secondary"> 
     <li><a href="/computers/mouse/">Клавиатуры, мыши, коврики</a> 
      <ul> 
       <li><a href="/computers/mouse/p1411v3519/p1411v3570">Клавиатуры</a></li> 
       <li><a href="/computers/mouse/p1411v3519/p1411v3554">Мыши</a></li> 
     <li><a href="/computers/mouse/">все клавиатуры, мыши, <br>коврики …</a> 
      </li></ul> 
     </li> 
     <li><a href="/computers/akustiks/">Акустические системы</a> 
      <ul> 
       <li><a href="/computers/akustiks/p1429v1054">5.1</a></li> 
       <li><a href="/computers/akustiks/p1429v1055">2.1</a></li> 
       <li><a href="/computers/akustiks/p1429v1056">2.0</a></li> 
       <li><a href="/computers/akustiks/">вся акустика …</a></li> 
      </ul> 
     </li> 
     <li><a href="/computers/webkamers/">Веб-камеры</a></li> 
     <li><a href="/computers/naushniki/">Гарнитуры и микрофоны</a></li> 
     <li><a href="/gadgets-electronics/pentablets/">Графические планшеты</a></li> 
     <li><a href="/computers/ups/">Источники бесперебойного питания</a></li> 
     <li><a href="/computers/philters/">Сетевые фильтры</a></li> 
     <li><a href="/computers/clener/">Средства по уходу</a></li> 
    </ul> 
    </div> 
</li> 
<li id="pm3" class="level1"><a class="level1" href="/component-parts/">Компьютерные<br>комплектующие</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/component-parts/case/">Корпуса</a></li> 
     <li><a href="/component-parts/processors/">Процессоры</a></li> 
     <li><a href="/component-parts/videocard/">Видеокарты</a></li> 
     <li><a href="/component-parts/sound-card/">Звуковые карты</a></li> 
     <li><a href="/component-parts/mp/">Материнские платы</a></li> 
     <li><a href="/component-parts/mem/">Модули памяти</a></li> 
     <li><a href="/component-parts/hdd/">Жесткие Диски</a></li> 
     <li><a href="/component-parts/ssd-drives/">Диски SSD</a></li> 
     <li><a href="/component-parts/powersupply/">Блоки питания</a></li> 
     <li><a href="/component-parts/cooler/">Системы охлаждения</a></li> 
     <li><a href="/component-parts/odd/">Дисководы DVD, CD, Blu-ray</a></li> 
     <li><a href="/computers/networking/">Сетевое оборудование</a></li> 
     <li><a href="/computers/desktops/">Системные блоки в сборе</a></li> 
    </ul> 
    </div> 
</li> 
<li id="pm4" class="level1"><a class="level1" href="/kompsperef/">Оргтехника</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/kompsperef/mfu/"><strong>МФУ</strong></a></li> 
     <li><a href="/kompsperef/printers/">Принтеры струйные и лазерные</a> 
    <ul> 
       <li><a href="/kompsperef/printers/p122v198">Монохромный</a></li> 
       <li><a href="/kompsperef/printers/p122v199">Цветной</a></li> 
       <li><a href="/kompsperef/printers/p122v200">Фотопринтер</a></li> 
       <li><a href="/kompsperef/printers/">все принтеры …</a></li> 
    </ul> 
     </li> 
     <li><a href="/tvbidaud/proektoru/">Проекторы</a></li> 
     <li><a href="/kompsperef/fax/">Факсы</a></li> 
     <li><a href="/kompsperef/skaners/">Сканеры</a></li> 
     <li><a href="/kompsperef/corded-phones/">Проводные телефоны</a></li> 
     <li><a href="/kompsperef/cordless-phones/">Радиотелефоны</a></li> 
     <li><a href="/kompsperef/kartridj/">Картриджи</a></li> 
     <li><a href="/kompsperef/bumaga/">Бумага</a></li> 
    </ul> 
    </div> 
</li> 
<li id="pm5" class="level1"><a class="level1" href="/telefsmart/">Смартфоны,<br>телефоны</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/telefsmart/mobile/p424v477"><strong>Смартфоны</strong></a></li> 
     <li><a href="/telefsmart/mobile/"><strong>Мобильные телефоны</strong></a></li> 
    </ul> 
    <ul class="pm-secondary"> 
     <li><a href="/telefsmart/covers/">Сумки, чехлы</a></li> 
     <li><a href="/telefsmart/zum/">Зарядные устройства</a></li> 
     <li><a href="/telefsmart/makom/">Аккумуляторы</a></li> 
     <li><a href="/photovideo/cartsmem/">Карты памяти</a></li> 
     <li><a href="/telefsmart/hendsfree/">Гарнитуры</a></li> 
     <li><a href="/telefsmart/mobileakses/">Другие аксессуары</a></li> 
    </ul> 
    </div> 
</li> 
<li id="pm6" class="level1"><a class="level1" href="/photovideo/">Фото</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/photovideo/slr/"><strong>Фотокамеры со сменной оптикой</strong></a> 
      <ul> 
       <li><a href="/photovideo/slr/p2664v3629">Зеркальные</a></li> 
       <li><a href="/photovideo/slr/p2664v3630">Беззеркальные</a></li> 
      </ul> 
     </li> 
     <li><a href="/photovideo/photoaparats/"><strong>Компактные фотоаппараты</strong></a> 
      <ul> 
       <li><a href="/photovideo/photoaparats/p329v425">Компактные</a></li> 
       <li><a href="/photovideo/photoaparats/p329v378">Ультра-компактные</a></li> 
       <li><a href="/photovideo/photoaparats/p329v426">Длиннофокусные</a></li> 
     <!-- li><a href="/photovideo/photoaparats/">Все компактные фотоаппараты &hellip;</a></li --> 
      </ul> 
     </li> 
     </ul> 
     <ul class="pm-secondary"> 
     <li><a href="/photovideo/lensesandfilters/">Объективы</a></li> 
     <li><a href="/photovideo/flash/">Вспышки</a></li> 
     <li><a href="/photovideo/filters/">Светофильтры</a></li> 
     <li><a href="/photovideo/shtativ/">Штативы</a></li> 
     <!-- li><a href="#">Гаджеты к фото</a></li --> 
     <li><a href="/photovideo/photosumki/">Сумки</a></li> 
     <li><a href="/photovideo/cartsmem/">Карты памяти</a></li> 
     <li><a href="/photovideo/photovideoakum/">Аккумуляторы, зарядные устройства и батарейки</a></li> 
     <li><a href="/photovideo/photokamersakses/">Аксессуары и средства по уходу</a></li> 
     <li><a href="/kompsperef/printers/p122v200">Фотопринтеры</a></li> 
     <li><a href="/photovideo/videokamers/">Видеокамеры</a></li> 
    </ul> 
    </div> 
</li> 
<li id="pm7" class="level1"><a class="level1" href="/gadgets-electronics/">Гаджеты</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/gadgets-electronics/e-books/"><strong>Электронные книги</strong></a></li> 
     <li><a href="/gadgets-electronics/ipodmp3/"><strong>MP3 плееры</strong></a></li> 
     <li><a href="/gadgets-electronics/digital-picture-frames/"><strong>Цифровые фоторамки</strong></a></li> 
     <li><a href="/gadgets-electronics/gps/"><strong>GPS навигация</strong></a></li> 
     <li><a href="/apple/ipod/"><strong>iPod</strong></a></li> 
     <li><a href="/gadgets-electronics/pentablets/">Графические планшеты</a></li> 
    </ul> 
    <ul class="pm-secondary"> 
     <!-- li><a href="#">Аксессуары к книгам и планшетам</a></li --> 
     <li><a href="/gadgets-electronics/gpsaccesories/">Аксессуары к GPS</a></li> 
     <li><a href="/gadgets-electronics/headphones/">Наушники</a></li> 
     <li><a href="/gadgets-electronics/3d-acces/">3D аксессуары</a></li> 
     <li><a href="/apple/apple-accessories/">Аксессуары к APPLE</a></li> 
     <li><a href="/apple/gadgets-for-apple/">Гаджеты к APPLE</a></li> 
     <li><a href="/gadgets-electronics/meteo/">Погодные станции, часы и радио </a></li> 
     <li><a href="/gadgets-electronics/port-dvd/">Портативные DVD плееры </a></li> 
    </ul> 
    </div> 
</li> 
<li id="pm8" class="level1"><a class="level1" href="/tvbidaud/">Телевизоры<br>и видео</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/tvbidaud/lcd-led/"><strong>Телевизоры</strong></a></li> 
     <li><a href="/tvbidaud/proektoru/"><strong>Проекторы</strong></a></li> 
     <li><a href="/tvbidaud/ekranu/">Экраны</a></li> 
    </ul> 
    <ul class="pm-secondary"> 
     <li><a href="/tvbidaud/3d-aksessuary/">3D аксессуары к ТВ</a></li> 
     <li><a href="/tvbidaud/hdtv-mediaplayers/">HDTV медиаплееры</a></li> 
     <li><a href="/tvbidaud/dvd-blu-ray-players/">DVD/Blu-ray плееры</a></li> 
     <li><a href="/tvbidaud/kabeli-podkljchenija/">Кабели для ТВ</a></li> 
     <li><a href="/tvbidaud/kreplenija-dlya-tv-av-projectorov/">Крепления для TV, AV и проекторов</a></li> 
     <li><a href="/tvbidaud/acses/">Аксессуары и средства по уходу</a></li> 
     <li><a href="/tvbidaud/domawnie-kinoteatru/">Домашние кинотеатры</a></li> 
     <li><a href="/tvbidaud/akysticheskie-sistemu/">Музыкальные центры и HI-FI </a></li> 
     <li><a href="/tvbidaud/tymbu-i-podstavki/">Тумбы и подставки</a></li> 
    </ul> 
    </div> 
</li> 
<li id="pm9" class="level1"><a class="level1" href="/pristavki/">Игровая<br>зона</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/pristavki/gamebox/"><strong>Игровые приставки</strong></a></li> 
     <li><a href="/pristavki/gameboxgames/">Игровые аксессуары</a></li> 
     <li><a href="/pristavki/joystick/">Игровые манипуляторы</a></li> 
     <li><a href="/computers/mouse/p2649v3571">Геймерские мышки и клавиатуры</a></li> 
     <li><a href="/pristavki/games/">Игры</a></li> 
    </ul> 
    </div> 
</li> 
<li id="pm10" class="level1"><a class="level1" href="/apple/">APPLE</a> 
    <div class="pm-dropdown"> 
    <ul class="pm-primary"> 
     <li><a href="/apple/macbook/"><strong>MacBook</strong></a></li> 
     <li><a href="/apple/ipod/"><strong>iPod</strong></a></li> 
     <li><a href="/apple/ipad/"><strong>iPad</strong></a></li> 
     <li><a href="/apple/apple-accessories/">Аксессуары к APPLE</a></li> 
     <li><a href="/apple/gadgets-for-apple/">Гаджеты к APPLE</a></li> 
    </ul> 
    </div> 
</li> 

看，它似乎工作：