Question

我想在导航栏的左侧放置一个标题（比导航栏中的其他文本更大的字体），到目前为止我已经实现了它在左侧，但是文本被切成一半，就像一半文本在导航栏之外，其中一半在其中。如何让文本完全保留在导航栏中？

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>

Answer 1

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

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

选中此JSFiddle

Answer 2

你有几个错误的结束标记会抛出错误，但这不会给你带来麻烦。

可能的问题是，大多数浏览器中的H1都会有默认的边距，从而使其摆脱重击。

我会调查添加一个css重置（从http://necolas.github.io/normalize.css/开始），但同时你可以通过在h1上将margin设置为0来解决这个问题：

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

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

导航栏标题不会留在原地

2 个答案: