Html 如何使我的按钮适合我的导航栏大小

我是web设计界的新手，所以我在使用bootstrap和w3帮助时遇到了以下问题。 我现在就知道了：

我想让右边的两个按钮适合整个导航栏的高度，有办法吗？类似于android中的匹配父对象。 这是我的密码：

李{ 显示：内联； 浮动：左； } 李阿{ 宽度：80px； 身高：匹配父母； 背景色：rgb49，48，48； 字体系列：Arial； 颜色：白色； 字号：700； 字体大小：24px； 填充：24px； 文字装饰：无； 垫底：8px； 填充顶部：8px； 文本对齐：居中； 显示：内联块； 左边框：1px纯黑； 右边框：1px纯黑； 转换：所有0.3秒到0秒； } 李娜：停下来{ 背景：1075e9； /*边界半径：50px*/ 边框颜色：1075e9； 过渡：全部。4s-0s； } 李a：积极的{ 背景色：07274d； 边框颜色：07274d； 转换：0s； } 对，李{ 浮子：对！很重要； } navbar先生{ 列表样式：无； 背景：rgb49,48,48； 高度：115.8px； } 横幅img{ /*边框：1px纯黑*/ 边界半径：30px； 宽度：80px； 高度：105.8px； 填充：4px； } 横幅图像：悬停{ 背景：RGB168168； 过渡：全部。4s-0s； } 横幅img：活动{ 背景色：rgb24，24，24； 边框颜色：白色； 转换：0s； } 测试页

---

将li的高度设为100%，并从a中移除顶部和底部填充物。使用“行高”垂直对齐文本

li {
        display: inline;
        height:100%;/* made the height to be the same as the parent's height */
        float: left;
        }

li a {
            line-height:110px; /* line height should be the same as the element's height*/
            width: 80px;
            height: 100%;
            background-color: rgb(49, 48, 48);
            font-family: Arial;
            color: white;
            font-weight: 700;
            font-size: 24px;
            padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/   
            text-decoration: none;
            text-align: center;
            display: inline-block;
            border-left: 1px solid black;
            border-right: 1px solid black;
            transition: all 0.3s ease 0s;
        }  

编辑。哦，如果你使用Chrome、Firefox，他们有开发工具，你可以使用这些工具查看要编辑的元素。

你可以使用display:flex；弹性增长：1；使内容正确。比使用浮子清洁得多

navbar先生{ 列表样式：无； 背景：rgb49,48,48； 高度：115.8px； 显示器：flex； } .标志{ 柔性生长：1； } 李阿{ 宽度：80px； 身高：匹配父母； 背景色：rgb49，48，48； 字体系列：Arial； 颜色：白色； 字号：700； 字体大小：24px； 填充：24px； 文字装饰：无； 垫底：8px； 填充顶部：8px； 文本对齐：居中； 显示：内联块； 左边框：1px纯黑； 右边框：1px纯黑； 转换：所有0.3秒到0秒； } 横幅img{ /*边框：1px纯黑*/ 边界半径：30px； 宽度：80px； 高度：105.8px； 填充：4px； } 横幅图像：悬停{ 背景：RGB168168； 过渡：全部。4s-0s； } 横幅img：活动{ 背景色：rgb24，24，24； 边框颜色：白色； 转换：0s； }

---

更改导航栏高度

.navbar {
    list-style: none;
    background: rgb(49, 48, 48);
    height: 115.8px;
}

或者，如果要保持导航栏的大小和

.right-li {
    float: right !important;
    height: 104px;
}

---

为定位图元添加线高度

李{ 显示：内联； 浮动：左； 身高：100%； } 李阿{ 宽度：80px； 线高：4.2； 背景色：rgb49，48，48； 字体系列：Arial； 颜色：白色； 字号：700； 字体大小：24px； 填充：24px； 文字装饰：无； 垫底：8px； 填充顶部：8px； 文本对齐：居中； 显示：内联块； 左边框：1px纯黑； 右边框：1px纯黑； 转换：所有0.3秒到0秒； } 李娜：停下来{ 背景：1075e9； /*边界半径：50px*/ 边框颜色：1075e9； 过渡：全部。4s-0s； } 李a：积极的{ 背景色：07274d； 边框颜色：07274d； 转换：0s； } 对，李{ 浮子：对！很重要； } navbar先生{ 列表样式：无； 背景：rgb49,48,48； 高度：115.8px； } 横幅img{ /*边框：1px纯黑*/ 边界半径：30px； 宽度：80px； 高度：105.8px； 填充：4px； } 横幅图像：悬停{ 背景：RGB168168； 过渡：全部。4s-0s； } 横幅img：活动{ 背景色：rgb24，24，24； 边框颜色：白色； 转换：0s； } 测试页 这是你的解决方案

李{ 显示：内联； 浮动：左； 身高：100%； } 李阿{ 线条高度：110px；/*线条高度应与元素高度相同*/ 宽度：80px； 身高：100%； 背景色：rgb49，48，48； 字体系列：Arial； 颜色：白色； 字号：700； 字体大小：24px； 填充：0 24px；/*从顶部和底部移除衬垫，以防止a元素溢出*/ 文字装饰：无； 文本对齐：居中； 显示：内联块； 左边框：1px纯黑； 右边框：1px纯黑； 转换：所有0.3秒到0秒； } 李娜：停下来{ 背景：1075e9； /*边界半径：50px*/ 边框颜色：1075e9； 过渡：全部。4s-0s； } 李a：积极的{ 背景色：07274d； 边框颜色：07274d； 转换：0s； } 对，李{ 浮子：对！很重要； } navbar先生{ 列表样式：无； 背景：rgb49,48,48； 高度：115.8px； } 横幅img{ /*边框：1px纯黑*/ 边界半径：30px； 宽度：80px； 高度：105.8px； 填充：4px； } 横幅图像：悬停{ 背景：RGB168168； 过渡：全部。4s-0s； } 横幅img：活动{ 背景色：rgb24，24，24； 边框颜色：白色； 转换：0s； } 测试页