怎样让li的高度跟ul高度一样高？

Question

第一张图是我写的html代码

第二张图是设计图

目的是鼠标移动上去背景色变红，我是用ul li 布局的，怎么写？我的背景红特别小，怎么调大一点？请各位朋友看看 下面是我的代码

/*nav*/
.nav {padding:0px; margin:0px; height: 77px; color: white; font-size: 22px; font-family: “华文黑体”; background-color: #676565; border: 0px solid; border-radius: 10px;}
.logo {width: 152px; display: inline-block; line-height: 77px; float: left; text-align: center; font-size: 30px; font-weight: bolder;}
.navigation {line-height: 33px; display:inline-block; width: 800px;}
.navigation ul{list-style-type: none; margin-left: -20px; }
.nav ul li {display: inline; margin-left: 25px; }
.nav a {color: white; text-decoration: none;}
.nav a:visited {text-decoration: none;}
.nav a:hover {background-color: #8c2828; color: white;}
.login {width: 150px; display: inline-block; line-height: 77px; float: right; font-size: 22px; text-align: center;}

<!-- nav -->
    <div class="nav">
        <div class="logo">Jinshi</div>
        <div class="navigation">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">结构化配资</a></li>
                <li><a href="">产品优势</a></li>
                <li><a href="">操作流程</a></li>
                <li><a href="">关于我们</a></li>
            </ul>
        </div>
        <div class="login"><a href="">登录</a></div>
    </div>
    <!-- nav end -->

Answer 1

• ul 的默认边距要去掉
• 元素高度设置好
• a 的 line-height

示例 https://jsfiddle.net/ydv7749s/9/

Answer 2

 你li设置的是display:inline,改为inline-block //inline是行内元素，设高度无效

Answer 3

需要高度是要设置高度，display使用block或者inline-block;不然高度不生效

Answer 4

首先你要搞清楚inline和inline-block的区别，inline的是行内元素，设置的宽和高都是不生效的，你设置成inline-block才可以设置宽高的。