我怎样才能把这个导航栏呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Untitled Document</title> 
 
<style> 
 
.abc { 
 
\t width:600px; 
 
\t height:120px; 
 
\t background-color:yellow; 
 
\t display:inline-block; 
 
} 
 
ul{ 
 
\t position:relative; 
 
\t display:inline-block; 
 
\t } 
 
ul li { 
 
\t display:inline; 
 
\t font-size:24px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="abc"> 
 
<img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" /> 
 
<ul > 
 
<li><a href="www.quora.com">Home</a></li> 
 
<li><a href="www.quora.com">gallery</a></li> 
 
<li><a href="www.quora.com">about us</a></li> 
 
<li><a href="www.quora.com">contact</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

我想利用这个导航条（上标识的中间对齐）。这个怎么做？我是新来的HTML/CSS以及新的堆栈溢出。

来源

2016-09-16 Ankit Kungwani

尝试使图像显示'：块;'。 – Xufox

您可以使用HTML5 <nav>标签，并FlexBox盒模型来实现这一目标。

这里是一个活的DEMO。

HTML：

<nav> 
    <img src="path/to/my/logo" width="180" height="100%"> 
    <a href="#">home</a> 
    <a href="#">gallery</a> 
    <a href="#">about us</a> 
    <a href="#">contact</a>  
</nav>

CSS：

body{ 
    margin: 0 !important; 
} 
nav{ 
    height: 60px; 
    width: 100%; 

    display: flex; 
    justify-content: center; 
    align-items: center; 

    background-color: rgb(21, 138, 194); 
} 
nav > a{ 
    margin: 0 1em; 

    display: flex; 

    color: #036088; 
    text-transform: capitalize; 
    text-decoration: none; 
} 
nav > a:hover{ 
    color: white; 
}

来源

2016-09-16 19:33:00

在您的CSS中，您可以将页面的页边距设置为0，使页面的边界上的元素。

加入象下面这样：

*{ 
margin:0px; 
}

这将设置你的页面中以0保证金的所有内容。 *选择器匹配您的html页面中的每个元素。

来源

2016-09-16 18:38:39 Claiohm

将导航栏中图像的'vertical-align'属性设置为'middle'。

这将使图像旁边的任何其他内联元素与图像的垂直中心相对齐。

此链接描述了vertical-align属性是如何工作的div标签内https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

.abc { 
 
    width:600px; 
 
    height:120px; 
 
    background-color:yellow; 
 
    display:inline-block; 
 
} 
 
ul { 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
ul li { 
 
    display:inline; 
 
    font-size:24px; 
 
} 
 

 
/* THIS IS THE ONLY NEW CODE */ 
 
.abc img { 
 
    vertical-align: middle; 
 
}

<body> 
 
    <div class="abc"> 
 
    <img src="http://lorempixel.com/400/200/" width="180" height="120" /> 
 
    <ul> 
 
     <li><a href="www.quora.com">Home</a></li> 
 
     <li><a href="www.quora.com">gallery</a></li> 
 
     <li><a href="www.quora.com">about us</a></li> 
 
     <li><a href="www.quora.com">contact</a></li> 
 
    </ul> 
 
    </div> 
 
</body>

来源

2016-09-16 18:48:14

我最常做的是捕捉页面元素，并与利润率玩...

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 

.bar{ 
    margin-left: 150px; 
    margin-top: -95px; 
} 

.abc { 
    width:600px; 
    height:120px; 
    background-color:yellow; 
    position:absolute; 
    display:inline-block; 
} 
ul{ 
    position:relative; 
    display:inline-block; 
} 
ul li { 
    display:inline; 
    font-size:24px; 
} 
    </style> 
    </head> 
    <body> 
    <div class="abc"> 
    <div class="Image"><img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" /></div> 
    <div class="bar"> 
    <ul > 
    <li><a href="www.quora.com">Home</a></li> 
    <li><a href="www.quora.com">gallery</a></li> 
    <li><a href="www.quora.com">about us</a></li> 
    <li><a href="www.quora.com">contact</a></li> 
    </ul> 
    </div> 
    </div> 
    </body> 
    </html>

想要这样的东西吗？ :)

来源

2016-09-16 18:50:54 TwoDent

我怎样才能把这个导航栏呢？

回答

相关问题