如何将内联列表居中以适应所有屏幕尺寸

Question

这里是CSS：

            .wrapper{
                display: inline;
                line-height: 2em;
                width: 100%;
                height: 100%;
                min-width: 1000px;
                min-height: 1000px;
                text-align: center;
            }
            ul{
                list-style: none;
            }
            li{
                list-style: none;
            }
            .craftbeers{
                color: white;
                margin-top: 85px;
                display: inline-block;
            }
            .craftbeers h2{
                margin-left: 40px;
            }
            .winetap{
                color: white;
                margin-top: 85px;
                display: inline-block;
            }
            .winetap h2{
                margin-left: 40px;
            }
            .wineglass{
                color: white;
                margin-top: 85px;
                display: inline-block;
            }
            .wineglass h2{
                margin-left: 40px;
            }
            .spirits{
                color: white;
                margin-top: 85px;
                display: inline-block;
            }
            .spirits li{
                margin-left: -40px;
            }
            .other{
                color: white;
                margin-top: 85px;
                margin-left: 95px;
                line-height: 0.5em;
                text-align: center;
            }

这是 HTML：

<div class="wrapper">
            <div class="craftbeers">
                <h2>Craft Beers on Tap</h2>
            <ul>
                <li><bold>BrewDog</bold> Elvis Juice IPA (6.7%)... $7</li>
                <li><bold>New Belgium</bold> Fat Tire Amber Ale (5.2%)... $5</li>
                <li><bold>Wolf's Ridge</bold> Clear Sky Cream Ale (5%)... $6</li>
                <li><bold>Wolf's Ridge</bold> Clear Sky Daybreak (5%)... $6</li>
                <li><bold>Deschutes</bold> Fresh Squeezed IPA (6.4%)... $5</li>
                <li><bold>Ill Mannered</bold> O'Shag Irish Ale(4.8%)... $6</li>
                <li><bold>Ill Mannered</bold> Bitter Ex Double IPA (9.3%)... $8</li>
                <li><bold>CBC</bold> Bodhi Double IPA (8.5%)... $8</li>
                <li><bold>Seventh Son</bold> Bibiendum Stout (7%)... $6</li>
                <li><bold>Land Grant</bold> Beard Crumbs Stout (7.3%)... $8</li>
                <li><bold>Land Grant</bold> Greenskeeper(4.9%)... $7</li>
            </ul>
            </div>
            <div class="winetap">
                <h2>Wine on Tap</h2>
            <ul>
                <li><bold>The Dreaming Tree</bold> Red Blend... $10</li>
                <li><bold>Paul Dolan</bold> Sauvignon Blanc... $10</li>
                <li><bold>Franciscan</bold> Chardonnay... $10</li>
                <h3>Wine by Glass</h3>
                <li><bold>Matua</bold> Sauvignon Blanc... $12</li>
                <li><bold>Noble Vines</bold> Pinot Noir... $9</li>
                <li><bold>Mondavi</bold> Cabernet Sauvignon... $10</li>
                <li><bold>Bread & Butter</bold> Chardonnay... $9</li>
                <li><bold>Debonne</bold> GR Reisling... $9</li>
                <li><bold>Lagaria</bold> Pinot Grigio... $8</li>
                <li><bold>Pantucci</bold> Merlot... $8</li>
            </ul>
            </div>
            <div class="spirits">
                <h2>Spirits</h2>
            <ul>
                <li><bold>Jim Beam</bold> Single Barrel... $10</li>
                <li><bold>Knob Creek</bold>... $8</li>
                <li><bold>Knob Creek Rye</bold>... $8</li>
                <li><bold>Suntory Whisky Toki</bold>... $8</li>
                <li><bold>Captain Morgan</bold>... $7</li>
                <li><bold>Crown Bourbon Mash</bold>... $8</li>
                <li><bold>Grey Goose</bold>... $8</li>
                <li><bold>Pinnacle Raspberry</bold>... $6</li>
                <li><bold>Wild Turkey Rare Breed</bold>... $8</li>
                <li><bold>Clontarf 1014</bold>... $8</li>
                <li><bold>Crown Royal</bold>... $7</li>
            </ul>
            </div>
            <div class="other">
                <h3>Other</h3>
                <p><bold>Flights:</bold> 4 wine flights.. $15.00... 3 wine flights.. $13.00</p>
                <p><bold>Flights:</bold> Choose 4 beers.. $10.00</p>
                <p><bold>Can't decide?</bold> All samples only $1.00!</p>
                <p><bold>HAPPY HOUR:</bold> Monday-Friday 3:00-7:00, Saturday 12:00-5:00</p>
                <p><bold>Non-Alcoholic Beverages</bold>.. $1.00: Coke, Diet, Ginger Ale, Water</p>
                <p><bold>Snacks:</bold> Tommys Beef Jerky ($9.00), Chips($0.50)</p>
            </div>
            </div>

这确实适合我的Mac，但我改变了，现在它不适合Windows或Mac。我需要进行媒体查询吗？我也对内联块感到困惑。如果包装器只显示内联或每个类和内联单独没有内联块不起作用。另外，这是域：http://vineandtapdublin.com/wine.php

编辑：忽略.wineglass

任何帮助将不胜感激，谢谢。

Answer 1

你的问题是这个 css：

.wrapper{
                display: inline;
                line-height: 2em;
                width: 100%;
                height: 100%;
                min-width: 1000px;
                min-height: 1000px;
                text-align: center;
            }

内联元素不允许您设置宽度或高度。所以你想删除那行(默认情况下，它会变成 display：block(。之后，最小宽度会在较小的屏幕上造成麻烦：宽度可能为 360px 的手机将强制用户滚动以查看整个div，因为它太宽了。

您还需要修改 .other 中的行高。切勿使用小于 1em 的行高，否则如果有多个行，文本行将重叠(现在在移动设备中正在发生这种情况(。

Answer 2

我不知道

您是否在header中尝试过Viewport.视口将有助于适应(尤其是手机/平板电脑(屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1.0">