个人中心
gpt4 book ai didi

html - 按钮问题

转载 作者：太空宇宙 更新时间：2023-11-04 03:38:41 25 4
gpt4 key购买 nike

我的顶部导航按钮出现问题。假设我正在水平更改窗口的尺寸。我的按钮就是这样做的。 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);
}

最佳答案

这个问题，如果我理解正确的话，是关于溢出的。

Here is a JSFiddle这显示了你想要的和你拥有的之间的差异。

你需要做的主要是

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

overflow: auto 将在父元素太小而无法包含子元素时创建一个滚动条。white-space: nowrap 不会换行内容。

请注意，如果您在子元素(您的按钮)上使用 float，这将不起作用。摆脱那个。您不需要 float 和 display: inline-block。

关于html - 按钮问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25224984/

25 4 0
文章推荐： linux - 将模块添加到 angstrom 内核
文章推荐： python - 使用 Python 处理 Excel 表格
文章推荐： c - 信号量似乎无法在多线程中正常工作
文章推荐： linux - 无法在 Linux x86_64 上使用 Java 1.8 启动 RCP Eclipse 4.4.2 应用程序
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com