Question

我正在从头开始编写网页，但我遇到了问题。我知道我正在使用iframe，但这不是重点，所以请把它留下来。

不在侧边栏中的链接，即页面内容中的链接，根据我对CSS / CSS3的了解正确设置样式。但是，出于某种原因，当您单击链接时，它的宽度会发生变化，这是不需要的。但是，li，a:link和a:hover都有设定的宽度，所以我不知道这是怎么回事。按住鼠标按钮时也是如此。

<head>
    <title>BlackOwlStables</title>
    <style>
        body {
            background: rgba(112, 111, 111, 1);
            background: -moz-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(112, 111, 111, 1)), color-stop(100%, rgba(5, 5, 5, 1)));
            background: -webkit-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
            background: -o-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
            background: -ms-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
            background: radial-gradient(ellipse at center, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#706f6f', endColorstr='#050505', GradientType=1);
        }
        p {
            font-family:times, serif;
            color:#1a1a1a;
            padding:10px;
            margin:0;
            font-size:12px;
            letter-spacing:1px;
            text-align:justify;
        }
        h1, h2, h3 {
            font-family:times;
            letter-spacing:2px;
            font-size:30px;
            color:#1a1a1a;
            margin:0;
            padding:0;
        }
        iframe {
            width:650px;
            height:700px;
            border:1px solid #777777;
        }
        #content {
            width:860px;
            background:#888888;
            border:1px solid black;
            padding:20px;
            position:relative;
            margin:20px auto 0;
        }
        #body {
            margin-left:210px;
        }
        #side {
            width:200px;
            float:left;
            border-right:1px solid #666;
            position:absolute;
            top:10px;
            bottom:10px;
        }
        ul#navbar {
            list-style-type:none;
            margin:0;
            margin-left:-20px;
            margin-top:30px;
            padding:0;
        }
        #navbar li {
            text-align:center;
        }
        #navbar a:link, a:visited, a:active {
            transition: all 1s;
            display:inline-block;
            text-align:center;
            text-decoration:none;
            color:white;
            text-transform:uppercase;
            line-height:20px;
            font-size:10px;
            letter-spacing:3px;
            max-width:50px;
        }
        #navbar a:hover {
            transition:all 1s;
            background:#0a0a0a;
            max-width:180px;
        }
        #links {
            list-style-type:none;
            display:block;
            width:390px;
            margin:0 auto;
            padding:0;
        }
        #links li {
            text-align:center;
            display:inline-block;
            width:120px;
            overflow:hidden;
            margin:0;
        }
        #links a,a:link, a:active, a:visited, a:focus {
            transition: all 1s;
            display:inline-block;
            text-align:center;
            text-decoration:none;
            color:white;
            text-transform:uppercase;
            line-height:20px;
            font-size:10px;
            letter-spacing:1px;
            padding:0 2px;
            width:120px;
        }
        #links a:hover {
            transition:all 1s;
            background:#0a0a0a;
            width:120px;
        }
    </style>
</head>

<body>
    <div id="content">
        <div id="side">
            <ul id="navbar">
                <li><a href="#">Text</a>
                </li>
                <li><a href="#">Text</a>
                </li>
                <li><a href="#">Text</a>
                </li>
                <li><a href="#">Text</a>
                </li>
            </ul>
        </div>
        <div id="body">
        <h2>title hurr</h2>
            <p>Text</p>
            <ul id="links">
                <li><a href="/mog.html" target="box">M. Oceangaze</a></li
                ><li><a href="/lbh.html" target="box">L. Bloodhorn</a></li
                ><li><a href="/apv.html" target="box">A. Poisonvine</a></li
                ><li><a href="/vft.html" target="box">V. Flickertail</a></li
                ><li><a href="" target="box">-air-</a></li
                ><li><a href="" target="box">-water-</a></li
                >
            </ul>
            <iframe name="box">Your browser does not support iframes.</iframe>
            <p>2014 &copy; Brittny Baldwin</p>
        </div>
    </div>
</body>

我只想知道导致不必要的宽度变化的原因以及我如何解决它。

编辑：不是NAVBAR。内部#links UL。

Answer 1

#navbar a:link, #navbar a:visited, #navbar a:active {
    ....
}

#links a, #links a:link, #links a:active, #links a:visited, #links a:focus {
     transition: all 1s;
     display:inline-block;
     text-align:center;
     word-wrap: normal;
     overflow-wrap: normal;
     white-space: nowrap;
     text-decoration:none;
     color:white;
     text-transform:uppercase;
     line-height:20px;
     font-size:10px;
     letter-spacing:1px;
     padding:0 2px;
     width:120px;
     margin-right:1px;
}

Answer 2

这是您在max-width:50px;中设置的#navbar a:link, a:visited, a:active。更改或删除它，它将工作

        #navbar a:link, a:visited, a:active {
            transition: all 1s;
            display:inline-block;
            text-align:center;
            text-decoration:none;
            color:white;
            text-transform:uppercase;
            line-height:20px;
            font-size:10px;
            letter-spacing:3px;
            max-width:50px; //<--THIS
        }

更新

正如showdev所指出的那样，max-width正在流失是因为你一般都在指定a，所以一定要把它们放在它们的父级下面：

 #navbar a, #navbar a:link, #navbar a:active, #navbar a:visited, #navbar a:focus {

Answer 3

问题在于以下重叠定义：

下面，您要设置所有链接的访问和活动状态：

#navbar a:link, a:visited, a:active { ... }

下面，您要设置所有链接的链接，活动，访问和焦点状态：

#links a, a:link, a:active, a:visited, a:focus { ... }

您需要为每个州指定父级，以防止两个定义重叠。例如：

#navbar a:link, 
#navbar a:visited, 
#navbar a:active {
    ....
}

#links a, 
#links a:link, 
#links a:active, 
#links a:visited, 
#links a:focus {
    ....
}

WORKING EXAMPLE

Css链接宽度更改点击

3 个答案: