html - 当内容文本字体大小变大时，如何避免元素扩展？-6ren

html - 当内容文本字体大小变大时，如何避免元素扩展？

转载作者：行者123 更新时间：2023-11-28 00:42:47

26

4

当我将鼠标悬停在其中一个元素上时，该元素本身会展开，而其他元素会在字体大小变大时进行调整。如何阻止它？

同样的事情发生在红色背景上，所以我设置了一个 height: 38px;避免扩展:

header {
    position: relative;
    top: 10px;
    margin: 0 auto;
    height: 38px;
    width: 100%;
    background: red;
}

现在我尝试将高度和宽度设置为单个 <li>查看它是否根本不会移动/展开，但不起作用:

<li style="width: 130px; height: 38px;"><a href="homepage.html">Home</a></li>

* {
    margin: 0;
    padding: 0;    
}

body {
    background: royalblue;
    font-family: monospace;  
}

header {
    position: relative;
    top: 10px;
    margin: 0 auto;
    height: 38px;
    width: 100%;
    background: red;
}
.parent-ul {
    position: relative;
    top: 0px;
    list-style: none;
    text-align: center;
    padding: 11px 0;
}

.parent-ul li {
    margin: -4px;
    display: inline;
    padding: 7px 13px;
    border-left: 1px solid silver;
    transition: background 1s, border 1s, 
                border-radius 1s;
}

#prod {
    border-right: 1px solid silver;
    padding-right: 15px;
}

.parent-ul a {
    text-decoration: none;
    color: white;
    padding: 0px 50px;
    font-size: 14px;
    transition: color 1s, font-size .5s;
}

/* Effects ================================ */

li:hover {
    background: black;
    border: 0;
    border-radius: 2px;
}

li:hover + li  {
border: 0;
}

li:hover a {
    color: gold;
    font-size: 18px;
}

#prod:hover {
    border: 0;
}

<body>   
     <header>
       <ul class="parent-ul">
      
            <li style="width: 130px; height: 38px;"><a href="homepage.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
            <li id="prod"><a href="index.html">Products</a></li>
            
        </ul>      
     </header>
</body>

最佳答案

Yoy 可以使用float: left 和box-sizing: border-box 来对齐导航项。此外，使用 padding : 0 这样当您将文本变大时，它会居中。这是一个例子:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: royalblue;
    font-family: monospace;  
}

header {
    position: relative;
    margin: 0 auto;
    height: 38px;
    width: 100%;
    background: red;
}
.parent-ul {
    position: relative;
    list-style: none;
    text-align: center;
}

.parent-ul li {
    height: 38px;
    width: 20%;
    float: left;
    transition: background 1s, border 1s, 
                border-radius 1s;
}

.parent-ul li:not(:first-child) {
    border-left: 1px solid silver;
}

.parent-ul a {
    text-decoration: none;
    color: white;
    padding: 0;
    font-size: 14px;
    transition: color 1s, font-size .5s;
    line-height: 38px;
}

/* Effects ================================ */

li:hover {
    background: black;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

li:hover a {
    color: gold;
    font-size: 18px;
}

<body>   
     <header>
       <ul class="parent-ul">
      
            <li><a href="homepage.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="index.html">Products</a></li>
            
        </ul>      
     </header>
</body>

关于html - 当内容文本字体大小变大时，如何避免元素扩展？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52473981/

26

4

0

文章推荐： html - Bootstrap 4 的模态和滚动模态有什么区别？

文章推荐： Javascript 多重函数

perl - 避免 Mojolicious 异步行为？避免 "AnyEvent::CondVar: recursive blocking wait attempted"
我们已经有一个使用 AnyEvent 的库。它在内部使用 AnyEvent，并最终返回一个值(同步 - 不使用回调)。有什么方法可以将这个库与 Mojolicious 一起使用吗？它的作用如下: #
JAXB 避免 JAXBElement
我想从 XSD 文件生成带有 JAXB 的 Java 类。问题是，我总是得到一些像这样的类(删除了命名空间): public static class Action { @X
javascript - 避免/禁用自动跳转到输入字段
我有一个关于 html 输入标签或 primefaces p:input 的问题。为什么光标总是自动跳转到输入字段。我的页面高度很高，因此您需要向下滚动。输入字段位于页面末尾，光标自动跳转(加载)到页
oop - 避免 if 语句
我今天在考虑面向对象设计，我想知道是否应该避免 if 语句。我的想法是，在任何需要 if 语句的情况下，您都可以简单地创建两个实现相同方法的对象。这两个方法实现只是原始 if 语句的两个可能的分支。
java - 避免 NullPointerException
String graphNameUsed = graphName.getName(); if (graphType.equals("All") || graphType.equals(
mysql - 避免/删除表中的重复行
我有一张友谊 table CREATE TABLE IF NOT EXISTS `friendList` ( `id` int(10) NOT NULL, `id_friend` int(10
c - 避免 if in 循环
上下文 Debian 64。Core 2 二人组。摆弄循环。我使用了同一循环的不同变体，但我希望尽可能避免条件分支。但是，即使我认为它也很难被击败。我考虑过 SSE 或位移位，但它仍然需要跳转(
java - 避免 OutOfMemoryError
我最近在 Java 中创建了一个方法来获取字符串的排列，但是当字符串太长时它会抛出这个错误:java.lang.OutOfMemoryError: Java heap space我确信该方法是有效的，
c++ - 避免 while (!is_eof)
我正在使用 (C++) 库，其中需要使用流初始化对象。库提供的示例代码使用此代码: // Declare the input stream HfstInputStream *in = NULL; tr
MySQL 避免 WHERE/AND 中的子查询重复
我有一个 SQL 查询，我在 WHERE 子句中使用子查询。然后我需要再次使用相同的子查询将其与不同的列进行比较。我假设没有办法在子查询之外访问“emp_education_list li”？我猜
android - 避免 NetworkOnMainThreadException
我了解到在 GUI 线程上不允许进行网络操作。对我来说还可以。但是为什么在 Dialog 按钮点击回调上使用这段代码仍然会产生 NetworkOnMainThreadException ？ new T
C++ 避免 if & 硬编码字符串
有没有办法避免在函数重定向中使用 if 和硬编码字符串，想法是接收一个字符串并调用适当的函数，可能使用模板/元编程.. #include #include void account() {
c - 避免 TIME_WAIT
我正在尝试避免客户端出现 TIME_WAIT。我连接然后设置 O_NONBLOCK 和 SO_REUSEADDR。我调用 read 直到它返回 0。当 read 返回 0 时，errno 也为 0。我
c++ - 避免/检测对导出文件的操纵
我正在开发 C++ Qt 应用程序。为了在应用程序或其连接的设备出现故障时帮助用户，程序导出所有内部设置并将它们存储在一个普通文件(目前为 csv)中。然后将此文件发送到公司(例如通过邮件)。为避免
java - 避免 instanceof
我有一组具有公共(public)父类(super class)的 POJO。这些存储在 superclass 类型的二维数组中。现在，我想从数组中获取一个对象并使用子类的方法。这意味着我必须将它们转
java - 避免 "for"语句中的空指针异常
在我的代码中，当 List 为 null 时，我通常使用这种方法来避免 for 语句中的 NullPointerException: if (myList != null && myList.size
c - 避免 TIME_WAIT
我正在尝试避免客户端出现 TIME_WAIT。我连接然后设置 O_NONBLOCK 和 SO_REUSEADDR。我调用 read 直到它返回 0。当 read 返回 0 时，errno 也为 0。我
c - 避免/减轻每次函数调用后返回值检查的痛苦的方法？
在不支持异常的语言和/或库中，许多/几乎所有函数都会返回一个值，指示其操作成功或失败 - 最著名的例子可能是 UN*X 系统调用，例如 open( ) 或 chdir()，或一些 libc 函数。无
R 按值选择，避免 NA
我尝试按值提取行。 col1 df$col1[col1 == "A"] [1] "A" NA 当然我只想要“A”。如何避免 R 选择 NA 值？顺便说一句，我认为这种行为非常危险，因为很多人都会陷入
R 避免 rowwise() 并寻找更快的替代方案
我想将两个向量合并到一个数据集中，并将其与函数 mutate 集成为 5 个新列到现有数据集中。这是我的示例代码: vector1% rowwise()%>% mutate(vector2|>

首页

博学

6Ren·AI

商城

html - 当内容文本字体大小变大时，如何避免元素扩展？