菜单超出右边界但未离开

时间：2014-12-15 03:09:09

标签： html css

所以我有一个导航菜单。 nav.png为空格，nav1.png nav2.png nav3.png nav4.png为实际按钮，如home，about us等。

我有以下代码：

＆＃13;
＆＃13; 
#navigation_bar {
  display: table;
  margin: 0 auto;
}
.menu_btn {
  display: table-cell;
}
.menu_btn img {
  height: 90%;
}
＆＃13; 
<div id="navigation_bar">
  <div class="menu_btn">
    <img src="http://i.stack.imgur.com/7q5bs.png">
  </div>
  <div class="menu_btn">
    <img src="http://i.stack.imgur.com/wxDQj.png">
  </div>
  <div class="menu_btn">
    <img src="http://i.stack.imgur.com/Fwmkn.png">
  </div>
  <div class="menu_btn">
    <img src="http://i.stack.imgur.com/qRpbK.png">
  </div>
  <div class="menu_btn">
    <img src="http://i.stack.imgur.com/GksMc.png">
  </div>
  <div class="menu_btn">
    <img src="http://i.stack.imgur.com/7q5bs.png">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

使用上面的代码我得到了这个

enter image description here

正如您所看到的菜单ISN＆＃39; T居中。我希望菜单位于中心。酒吧在右侧窗外。但在左侧它保持几个像素的边距......

我希望它能在两侧的窗外走出，所以它在整个页面中显示为黑线。

此外，我的nav.png是一张长图片（宽度方式）。

这是pngs

enter image description here enter image description here enter image description here enter image description here enter image description here

2 个答案:

答案 0 :(得分：2)

采用背景图像方法。

＆＃13;
＆＃13; 
#navigation_bar {
  background-image: url(http://i.stack.imgur.com/7q5bs.png);
  background-repeat: repeat-x;
  text-align:center;  
}

.menu_btn {
  display:inline-block;
}

.menu_btn img {
  height: 90%;
}
＆＃13; 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>GETTING STARTED WITH BRACKETS</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="content">
            <img src="images/logo/logo.png">
        </div>
        <hr>
        <div id="navigation_bar">
            <div class="menu_btn"><img src="http://i.stack.imgur.com/wxDQj.png" /></div>
            <div class="menu_btn"><img src="http://i.stack.imgur.com/Fwmkn.png" /></div>
            <div class="menu_btn"><img src="http://i.stack.imgur.com/qRpbK.png" /></div>
            <div class="menu_btn"><img src="http://i.stack.imgur.com/GksMc.png" /></div>
        </div>
        <hr>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

让我们现代化！

让我们用纯CSS制作：

Mirror Nav

背景CSS渐变和没有图像，使用伪元素

镜像

通过使用线性渐变背景并且根本没有图像，我们可以更轻松地实现这一目标。

  • 背景由线性渐变创建。

  • 如果需要，可以在CSS中更改字体。

  • 文字垂直居中，line-height: 40px（与导航的高度相匹配）

  • 文本在导航

    • 上以text-align: center水平居中

使用data-*和伪元素，我们甚至可以使用纯CSS 在下面提供镜像。

主要好处：

  • 搜索引擎可以轻松存档链接文本，屏幕阅读器可以轻松阅读搜索引擎优化和链接文本

  • 无需编辑图像即可轻松更改渐变和链接

完整示例

使用过滤器支持CSS渐变are supported IE10 +和IE 6 - 9。确保开始和结束<a>之间没有间隙。 This prevents an inline gap 

nav {
  height: 40px;
  background: #000;/*Non supporting browsers*/
  background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /*IE6 - 9*/
  line-height: 40px;
  text-transform: uppercase;
  text-align: center;
  min-width: 620px;
    position: relative;
}
nav::before {
  background: linear-gradient(to top, rgba(76, 76, 76, 0) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}
nav a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2em;
  border-right: solid 1px #FFF;
  padding: 0 10px;
  position: relative;
  display: inline-block;
}
nav a:first-child {
  border-left: solid 1px #FFF;
}
nav a:hover {
background: #F00;  
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);
}
nav a::before {
content: attr(data-mirror); 
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0 10px;
  color: #000;
  transform: scaleY(-1);
  color: #FFF;
  opacity: 0.2;
  pointer-events: none;
}
nav a:hover::before { 
  background: rgba(255,255,255,0.2);
    opacity: 0.5;
}
<nav>
  <a href="#" data-mirror="Home">Home</a><a href="#" data-mirror="Categories">Categories</a><a href="#" data-mirror="Create">Create</a><a href="#" data-mirror="Upload">Upload</a>
</nav>

相关问题
最新问题