我设法添加更多长度以使导航栏居中的元素是什么

Question

http://jsfiddle.net/RichardTargett/gq966x0x/

.left-nav-box {
    background-color: #fff;
    border: 2px solid #0B88D2; 
    box-sizing: border-box;
    float: left;   
    height: 1500px;
    margin: 0px;
    width: 225px;
}

#logo-image {
    border: 2px solid #0B88D2;
    margin-left: 10px;
    margin-top: 10px;
}

}
.left-nav-box ul {
    margin: 0px;
    width: 168px;
}

.left-nav-box ul li{
    border: 1px solid #0B88D2;
    box-sizing: border-box;
    color: #2B5772;
    font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande',       lucida, sans-serif;
    list-style-type: none;
    margin: 5px 5px;
    padding: 10px 10px;
    width: 168px;
}

.left-nav-box ul li:hover{
    border: 1px solid #0B88D2;
    border-bottom: 5px solid #0B88D2;
    box-sizing: border-box;
    color: #2B5772;
    font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande',       lucida, sans-serif;
    list-style-type: none;
    margin: 5px 5px;
    padding: 10px 10px;
    width: 168px;
}


.left-nav-box ul li:nth-child(1):hover {
border-bottom: 5px solid red;
  font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande',       lucida, sans-serif;
    text-align: center;
    color: #EE0060;

}

<div class="left-nav-box">
       
        <img src="http://unawakened.net/images/intro.jpg" id="logo-image" width="198">

    <ul>
        <li>Record</li>
        <li>Home</li>
        <li>Art & Media</li>
        <li>Archive</li>
        <li>Forums</li>
        <li>Social</li>
        <li>Sign Up</li>
        <li>Contact Us</li>
    </ul>
   
        
        
            </section>

这是我的代码。我是网页设计的[新手]，所以请理解。我的问题；

我做错了什么。我希望导航框与徽标的长度相等。而且没有。

只需向左侧添加几个像素即可。这是我没有显示的更多代码的左侧导航栏。我应该展示更多吗？我该怎么做才能不被否决谢谢

Answer 1

向 CSS 添加一些内容：

.left-nav-box ul{
  padding: 0px 5px;
}

和

.left-nav-box ul li{
  width: 201px;
}

基本上，浏览器使用 <ul> 标签并自动在左侧填充，因此您需要手动告诉它不要这样做，然后相应地调整 <li> 宽度。

Answer 2

不用担心否决票。你的问题很好！ :)

主要问题是 <ul> 标签自动将左填充添加到基础 <li> 元素。

一般来说，尽量不要在代码中重复自己。例如，当您设置了 li 元素的样式时，您不必重复 CSS 与 li:hover 选择器相同的样式。尝试找到模式并利用它们。一开始很难，复制粘贴看起来更容易，但一段时间后你的生活会变得容易很多...

这里更干净一些 fiddle 对齐了 li 元素。

Answer 3

在CSS

之后更新

.left-nav-box ul{padding-left: 7px;}
.left-nav-box ul li{width: 200px;}

您想增加哪个元素的长度？

我设法添加更多长度以使导航栏居中的元素是什么

What element do I manage to add more length & center a nav bar

html

css

jsfiddle