0

我想在导航栏的左侧放置一个标题（比导航栏中的其他文本更大的字体），到目前为止，我已经将它放在左侧，但是文本被剪掉了一半，就像一半的文本在外面导航栏和它的一半在里面。我怎样才能让文本完全留在导航栏中？

CSS

<style>

 #navbar ul { 
    margin:0 auto;
    padding: 10px; 
    list-style-type: none; 
    text-align: center; 
    background:#1c1c1c;
    }

#navbar ul li {  
    display: inline; 
    } 

#navbar ul li a { 
    font-family: calibri;
    font-size: large;
    text-decoration: underline;
    font-weight: 200;
    border: 0.5px solid #242424;
    border-radius: 2px;
    padding:.3em 1em; 
    color: #ffffff; 
    background-color:transparent; 
    } 

#navbar ul li a:hover { 
    color: #000; 
    background-color: #ffffff;  
    border-radius: 5px;
    color:#1c1c1c;  
    } 

#navbar {
  position: fixed;
  margin-top: 0;
  top: 0;
  left: 0;
  width: 100%;
  z-index:0;
}
 #navbar {
    overflow: hidden;
}
#navbar h1 {
    float: left;
}

</style>

HTML

<!DOCTYPE html>
    <html lang="en">
        <head>
         <title>ClickonDeal.com.au-Electronics</title>
         <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
        </head>

 <div id="navbar">
        <h1>Click</h1>
      <ul> 
        <li><a href="#">Stuff</a></li> 
        <li><a href="#">more stuff</a></li> 
        <li><a href="#">stuff</a></li> 
        <li><a href="#">stuff</a></li> 
        <li><a href="#">stuff</a></li> 
    </form>
      </ul> 
    </div>  
    </div>

    </html>
4

2 回答 2

0

将以下 CSS 添加到您的代码中：

#navbar h1 {
    float: left;
    margin:0;
}

检查这个JSFiddle

于 2013-07-19T03:56:05.340 回答
0

您有几个错误的结束标签会引发错误，但这并不是给您带来麻烦的原因。

可能的问题是，大多数浏览器中的 H1 都会有默认边距，这会使其失控。

我会研究添加一个 css 重置（从http://necolas.github.io/normalize.css/开始），但与此同时，您可以通过在 h1 上将边距设置为 0 来解决此问题：

#navbar h1 {
    float: left;
    margin: 0;
}

这是一个简单的 jsfiddle 显示该更改：http: //jsfiddle.net/adnrw/BjCBf/1/（h1 颜色更改为白色，因此我们可以看到它）

于 2013-07-19T03:56:25.780 回答