Question

当我更改页面比例（ ctrl - + ， ctrl - - ）时，打破了页面布局。

最后一项正在倒塌。

帮助我，我需要将布局更改为正确缩放的菜单。

Page：
屏幕截图：

Answer 1

因为这对你来说真的很重要，所以这是一个想法。

尝试使用float: left替换菜单项上的display:inline-block（如果需要IE7，则为display:inline-block;*display:inline;zoom:1），并在父元素上替换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>都有一个浮点数：左css到可以给你相同布局的东西不使用浮动：左（如<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>

看，它似乎有效：

enter image description here

更改页面比例（ctrl + ctrl-），打破页面布局

3 个答案: