Question

＆＃13;

<!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 {
	width:600px;
	height:120px;
	background-color:yellow;
	display:inline-block;
}
ul{
	position:relative;
	display:inline-block;
	}
ul li {
	display:inline;
	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>

＆＃13;

我想要使用此导航栏（在徽标中间对齐）。这该怎么做？我是html / css的新手，也是堆栈溢出的新手。

Answer 1

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

添加如下：

*{
margin:0px;
}

这会将页面的所有内容设置为0。 *选择器匹配html页面中的每个元素。

Answer 2

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

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

此链接描述了vertical-align属性如何工作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>

Answer 3

我通常做的是捕获div标签中的页面元素并使用边距...

as.zoo

想要这样的事吗？：）

Answer 4

您可以使用HTML5 <script> function SetMissingDataReason1(){ var reasons = prompt("Please enter a reason for missing data","Not collected"); document.getElementById('reason1').value = reasons; document.getElementById('missingdataform1').submit(); } </script> <form action='projectchecklist.php' method='post' id='missingdataform1'> <input type='hidden' name='action' value='setmissingdatareason'> <input type='hidden' name='projectid' value='124'> <input type='hidden' name='enrollmentid' value='22636'> <input type='hidden' name='projectchecklistid' value='9'> <input type='hidden' name='reason' id='reason1'> </form> <a href='#' onClick='SetMissingDataReason1();'>?</a>代码和FlexBox框模型来实现此目标。

这是一个实时DEMO。

HTML：

<nav>

CSS：

<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>

我该如何使用此导航栏？

4 个答案: