Question

我的顶部导航按钮遇到了问题。说我正在水平改变窗户的尺寸。我的按钮这样做。 enter image description here

如果浏览器水平过小，我希望它能做到这样的事情。

enter image description here

这是如何实现的？

在水平更改窗口尺寸时，我不希望我的按钮像这样包裹。

摘要：我希望我的导航按钮不会在屏幕水平变小时换行，但是当窗口水平变小时，我希望按钮离开屏幕，这样它们就不会包在一起。

如果您需要更多信息，请问我。现在我只是在这里提出一个简单的问题。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"</meta>

        <meta name="msapplication-TileColor" content="#FFFFFF">
        <meta name="msapplication-TileImage" content="MOPM-ico/favicon-144.png">
        <meta name="msapplication-config" content="MOPM-ico/browserconfig.xml">

        <link rel="shortcut icon" href="MOPM-ico/favicon.ico">
        <link rel="icon" sizes="16x16 32x32 64x64" href="MOPM-ico/favicon.ico">
        <link rel="icon" type="image/png" sizes="310x310" href="MOPM-ico/favicon-310.png">
        <link rel="icon" type="image/png" sizes="196x196" href="MOPM-ico/favicon-196.png">
        <link rel="icon" type="image/png" sizes="160x160" href="MOPM-ico/favicon-160.png">
        <link rel="icon" type="image/png" sizes="96x96" href="MOPM-ico/favicon-96.png">
        <link rel="icon" type="image/png" sizes="64x64" href="MOPM-ico/favicon-64.png">
        <link rel="icon" type="image/png" sizes="32x32" href="MOPM-ico/favicon-32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="MOPM-ico/favicon-16.png">
        <link rel="apple-touch-icon" sizes="152x152" href="MOPM-ico/favicon-152.png">
        <link rel="apple-touch-icon" sizes="144x144" href="MOPM-ico/favicon-144.png">
        <link rel="apple-touch-icon" sizes="120x120" href="MOPM-ico/favicon-120.png">
        <link rel="apple-touch-icon" sizes="114x114" href="MOPM-ico/favicon-114.png">
        <link rel="apple-touch-icon" sizes="76x76" href="MOPM-ico/favicon-76.png">
        <link rel="apple-touch-icon" sizes="72x72" href="MOPM-ico/favicon-72.png">
        <link rel="apple-touch-icon" href="MOPM-ico/favicon-57.png">

        <link type="text/css" rel="stylesheet" href="styles.css" />

        <title>
            MOPM~
        </title>

    </head>

    <body>
        <header>
            <!--header-->
            <div class="topHead">
                <img id="headertxt" src="pictures/header.png" width="100%" height="120px"/>
            </div>

            <!--header buttons-->
            <div class="headButtonSeperator">
                <div class="headButton">home</div>
                <div class="headButton">about</div>
                <div class="headButton">mod info</div>
                <div class="headButton">downloads</div>
                <div class="headButton">videos</div>
                <div class="headButton">links</div>
                <div class="headButton">dev team</div>
            </div>
        </header>

        <!--content-->
        <div id="home">

        </div>
    </body>
</html>

CSS：

body
{
    margin: 0;
    background-image: url('pictures/background.png');
}
/*--Classes--*/
.topHead
{
    width: 100%;
    height: 120px;
    background-color: #272B30;
    float: middle;
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    display: block;
    border-bottom: 4px dashed #1EC20B;
}

.headButtonSeperator
{
    width: 50%;
    height: 40px;
    background-color: none;
    position: absolute;
    top: 125px;
    left: 509px;
}

.headButton
{
    width: 120px;
    height: 10px;
    background-color: #313A3D;
    margin-left: 5px;
    display: inline-block;
    float: left;
    font-size: 0px;

    border-left: 3px solid #282E30;
    border-bottom: 3px solid #282E30;

    border-bottom-left-radius: 20px;
}


.headButton:hover
{
    width: 140px;
    height: 35px;
    background-color: #313A3D;
    margin-left: 10px;
    position: relative;
    display: inline-block;

    color: #DB481B;
    font-size: 20px;
    text-align: center;
    line-height: 35px;
    font-family: minecraft;
    text-shadow: 2px 2px #7A5E55;

    border-left: 3px solid #282E30;
    border-bottom: 3px solid #282E30;
    border-bottom-left-radius: 20px;
}

/*--ID's--*/
#home
{
    display: block;
    width: 918px;
    height: 1000px;
    background-color: white;
    position: absolute;
    top: 500px;
    left: 500px;
    float: middle;
    z-index: -1;
}

/*--Fonts--*/
@font-face
{
        font-family: minecraft;
        src: url(fonts/minecraft.ttf);
}

@font-face
{
        font-family: McBold;
        src: url(fonts/ARCADEPI.ttf);
}

@font-face
{
        font-family: McBlock;
        src: url(fonts/Square.ttf);
}

@font-face
{
        font-family: MccBlock;
        src: url(fonts/Squareo.ttf);
}

Answer 1

如果我理解正确的话，这个问题就是overflow。

Here is a JSFiddle显示了您想要的和您拥有的内容之间的差异。

你需要做的主要是

.doNotWrap {  
overflow: auto;  
white-space: nowrap;  
}

当父级太小而不能包含子元素时，

overflow: auto将创建一个滚动条。 white-space: nowrap不会包含内容。

请注意，如果您在子元素（按钮）上使用float，则无法使用此功能。摆脱它。您不需要float和display: inline-block。

Answer 2

我认为您希望将样式white-space: nowrap放在父容器上。

Answer 3

它只与这些元素的终极容器的width属性有关，你必须将它设置为一个确定的值，以防止它收缩超过它应该和因此，为了弄乱你的页面结构，建议你将容器的overflow属性设置为hidden，让渲染引擎正确计算大小和位置，并防止其包含元素的边距侵入你的容器的边界，这也会导致结构出现问题。我正在研究的网站上的一些例子：

正常(full size)：

已调整大小的窗口(full size)：

代码（简化）：

ul {
    display: block;
    overflow: hidden;
    width: 885px;
    margin: 15px 0px 0px 15px;
}

li {
    display: block;
    overflow: hidden;
    float: left;
    width: 162px;
    height: 162px;
    overflow: hidden;
    margin: 0px 15px 15px 0px;
}

ul是我的容器，而li是我的按钮。

按钮问题

3 个答案: