Question

我是HTML＆amp; CSS编码，我在尝试将项目集中在导航栏中时遇到问题。我已经尝试了很多东西来集中项目，但我找不到解决方案。我认为这与CSS中border-style: solid;和.l-triangle-bottom的{{1}}（下面的代码）有关，因为当我删除它时，所有项目都会向左移动。

有人可以帮帮我吗？

这是我的代码和一些解释。

HTML

.l-triangle-top

CSS

我有一个主容器，在页面顶部有一个固定位置。

<div id="navigation_container">
   <div class="l-triangle-top"></div>
      <div class="l-triangle-bottom"></div>
         <div class="rectangle">
            <ul id="navigation">
               <li class="active"><a href="#">&#10029; Home</a></li>
               <li><a href="#">Location</a></li>
               <li><a href="#">Location</a></li>
               <li><a href="#">Our History</a></li>
               <li><a href="#">Gifts</a></li>
               <li><a href="#">Promotion</a></li>
               <li><a href="#">Gallery</a></li>
            </ul>
         </div>
         <div class="r-triangle-top"></div>
         <div class="r-triangle-bottom"></div>              
      </div>

然后我在主容器中有一个矩形，就是物品所在的位置。

#navigation_container {
    position: fixed;
    width: 1000px;
    height: 200px;
    top: 10%;
    left: 50%;
    margin-top: -100px;
    margin-left: -500px;
}

这些是物品。

.rectangle {
    background: #e5592e;
    height: 62px; 
    position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

   -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    z-index: 500; 
    margin: 3em 0;
    text-align: center;

}

我在矩形的每个部位都有一些三角形来制作磁带的效果。

#navigation li {
    list-style: none;
    display: block;
    float: left;
    margin: 0.1em 0.8em;

}

#navigation li a {
    text-shadow: 0 2px 1px rgba(0,0,0,0.5);
    display: block;
    text-decoration: none;
    color: #f0f0f0;
    font-size: 1.6em;
    line-height: 60px;

}


#navigation li.active a:hover, #navigation li a:hover {
    margin-top: 2px;
    color: aqua;
}

Answer 1

你在CSS中将它放在正确的轨道上应该将它们集中在一起：

.rectangle { text-align: center; }

但是，您通过使用此代码浮动项目来覆盖该样式：

#navigation li { float: left; }

因此，如果删除float: left;样式，它应该可以正常工作。

Answer 2

试试这个：由于三角形，图标没有居中，所以你必须使这些绝对。

我也在html中进行了一些更改

＆＃13;

#navigation_container {
			position: fixed;
			width: 1000px;
			height: 200px;
			top: 0;
			left: 50%;
			margin-top: 00px;
			margin-left: -500px;
		}
		.rectangle {
			/*background: #e5592e;*/
			height: 62px; 
			position: relative;
			-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
			-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
			box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			border-radius: 2px;

			z-index: 500; 
			margin: 3em 0;
			text-align: center;

		}

		#navigation li {
			list-style: none;
			display: inline-block;;
			margin: 0.1em 0.8em;
		}

		#navigation {
			padding-left: 0;
			position: relative;
			z-index: 2;
			background: #e5592e;
		}

		#navigation li a {
			text-shadow: 0 2px 1px rgba(0,0,0,0.5);
			display: block;
			text-decoration: none;
			color: #f0f0f0;
			font-size: 1.6em;
			line-height: 60px;

		}


		#navigation li.active a:hover, #navigation li a:hover {
			top: 2px;
            position: relative;
			color: aqua;
		}

		.l-triangle-top {
			border-color: #d9542b transparent transparent;
			border-style: solid;
			border-width:50px;
			height:0px;
			width:0px;
			position: absolute;
			float: left;
			top: 4px;
			left: -50px;

		}

		.l-triangle-bottom {
			border-color: transparent transparent #d9542b;
			border-style:solid;
			border-width:50px;
			height:0px;
			width:0px;
			position: absolute;
			float: left;
			top: -37px;
			left: -49px;
		}


		.r-triangle-top {
			border-color: #d9542b transparent transparent;
			border-style:solid;
			border-width:50px;
			height:0px;
			width:0px;
			position: absolute;
			float: right;
			right: -50px;
			top: 0;
		}

		.r-triangle-bottom {
			border-color: transparent transparent #d9542b;
			border-style:solid;
			border-width:50px;
			height:0px;
			width:0px;
			position: absolute;
			float: right;
			top: -37px;
			right: -50px;
		}

＆＃13;

<div id="navigation_container">
		<div class="rectangle">
			<div class="l-triangle-top"></div>
			<div class="l-triangle-bottom"></div>
			<ul id="navigation">
				<li class="active"><a href="#">&#10029; Home</a></li>
				<li><a href="#">Location</a></li>
				<li><a href="#">Location</a></li>
				<li><a href="#">Our History</a></li>
				<li><a href="#">Gifts</a></li>
				<li><a href="#">Promotion</a></li>
				<li><a href="#">Gallery</a></li>
			</ul>
			<div class="r-triangle-top"></div>
			<div class="r-triangle-bottom"></div>
		</div>
	</div>

＆＃13;

Answer 3

最小中心导航栏

body {
  margin: 0;
  padding: 0;
}

div {
  background: #757575;
  border-top: 2px solid;
  border-bottom: 2px solid;
  margin: 0 0 30px;
}

#nav {
  height: 3.2em;
  width: 760px;
  margin: 0 auto;
  list-style: none;
}

#nav li {
  float: left;
}

#nav a {
  display: block;
  text-align: center;
  color: #000;
  height: 3.2em;
  width: 150px;
  line-height: 3.2em;
  text-decoration: none;
  margin-left: -2px;
  font-weight: bold;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
}

#nav a:hover,
#nav a:focus {
  background: #5E9BD9;
  color: #fff;
}

<div>
  <ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">CAPABILITIES</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">RFQ</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>
</div>

如何居中导航栏项目？

3 个答案: