Question

编辑：JSFiddle link of what I have right now

我正在尝试设计一个网页，其标题如下：(imgur link)。

基本上我想要一个居中的徽标，在它下方有五个（或更多）链接。这里有些棘手：我想将中心链接与徽标图像的确切宽度相匹配，让其他四个链接浮动到左侧和右侧。

到目前为止我已经

了

<div id="logoDiv">
    <img id="logo" src="resources/images/logo.png" alt="logo image" width="300" height="138">
</div>

<div id="mainMenu" style="text-align:center;">

    <div class="mainMenuDiv" style="">
        <a class="menuItem" href="1.html">link 1</a>
    </div>
    <div class="mainMenuDiv" style="">
        <a class="menuItem" href="2.html">link 2</a>
    </div>
    <div class="mainMenuDiv" id="mainMenuCenter" style="">
        <a class="menuItem" id="mainMenuItem" href="index.html">centered main link</a>
    </div>
    <div class="mainMenuDiv" style="">
        <a class="menuItem" href="4.html">link 4</a>
    </div>
    <div class="mainMenuDiv" style="">
        <a class="menuItem" href="5.html">link 5</a>
    </div>
</div>

但无论我在样式表中放入什么（或现在的空白样式标签），我都无法让五个div始终将中心一个完全居中，与屏幕分辨率无关。使用display：indent-block;和浮动：左||右;我设法靠近，但当屏幕不够宽时，我最终得到了链接1＆amp;＆amp; / || 2标志下看起来很糟糕。

我不应该将所有这些都放在容器中吗？我应该放弃并尝试用javascript定位它们吗？我对HTML / CSS编程很陌生，我不确定这里有什么正确的方法，所以任何帮助都会非常感激。

Answer 1

使用媒体查询在小屏幕上显示内容的显示方式。例如：

JSFiddle：http://jsfiddle.net/LWP5V/2/

.mainMenuItemDiv {
    display:inline-block;
    vertical-align: top;
    width: 19%;
    text-align: center;
}

@media (max-width: 400px) {
    .mainMenuItemDiv {
        display: block;
        width: 100%;
    }
}

Answer 2

<强> HTML

<div id="wrapper">
    <div id="logoDiv">
        <img id="logo" src="" alt="Logo"/>
    </div>

    <div id="mainMenu">
       <div class="mainMenuItemDiv">
            <a class="menuItem" href="1.html">1</a>
        </div>

        <div class="mainMenuItemDiv">
            <a class="menuItem" href="2.html">2</a>
        </div>

        <div class="mainMenuItemDiv" id="mainMenuCenter">
            <a class="menuItem" href="index.html">Three</a>
        </div>

        <div class="mainMenuItemDiv">
            <a class="menuItem" href="4.html">4</a>
        </div>

        <div class="mainMenuItemDiv">
            <a class="menuItem" href="5.html">5</a>
        </div>
    </div>
</div>

<强> CSS

#wrapper
{
    margin:0px auot;
    width:500px;
}
#logoDiv {
    text-align:center;
    width:500px;

}

#mainMenu {
    margin:0px auto;
    padding:0px;
      text-align:center;
        width:500px;
        display:inline-block;
    }

.mainMenuItemDiv {
            display:inline-block;
            width:100px;
            float:left;
}
a
{
    text-decoration:none;
    display:inline-block;
    font-size:14pt;
    color:red;
}

Fiddle Demo Here

使用低分辨率屏幕的后备中心五个<div>元素</div>

2 个答案: