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，但我改变了＆amp;现在它不适合Windows或Mac。我需要进行媒体查询吗？我也很困惑w / inline-block。如果包装器仅显示内联或每个类别＆amp;没有内联块的单独内联不起作用。此外，这是域：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）。在此之后，min-width将在较小的屏幕上引起麻烦：宽度可能为360px的手机将强制用户滚动以查看整个div，因为它太宽。

您还需要修改.other中的行高。你不应该使用小于1em的行高，或者如果有多行（现在在移动设备中发生），文本行将重叠。

Answer 2

我不知道您是否在header中尝试了Viewport。 Viewport将有助于（特别是手机/平板电脑）屏幕。

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

如何使内联列表居中以适合所有屏幕尺寸？

2 个答案: