如何使用css在顶部导航栏上添加后退按钮？答案

【问题标题】：How to add back button on top navigation bar using css?如何使用css在顶部导航栏上添加后退按钮？
【发布时间】：2019-08-26 20:10:11
【问题描述】：

大家好，我想在顶部导航栏上添加一个后退箭头按钮，就像图片一样：

但是我当前的代码根本没有使用 css 显示背面图像。你们能帮我让可点击的后退按钮可见吗？在此先感谢。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>

.abcde {
    -webkit-box-direction: normal
}


.abcde,
.Fresh {
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.abcde {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 44px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 16px
}


.sky14 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #262626;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

</style>
<style>

.abcde .Fresh Mango {
        background-image: url(./backArrow.png);
    }


</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

function MyNavigation()
{

alert("do something here");

}

</script>
</head>

<body>

<div class="abcde" id="abcde">
    <div class="Fresh Mango"><a href="javascript:MyNavigation();"><span class="cherry" aria-label="Back"></span></a></div>
    <h1 class="sky14">Photo</h1>
    <div class="Fresh Orange"></div>
</div>
</body>
</html>

【问题讨论】：

标签： javascript html css back-button singlepage

【解决方案1】：

你们能帮我让可点击的后退按钮可见吗？

是的。这是一个非常快速的示例。如有任何问题，请随时提出。

（由于我无法从您的示例中获得./backArrow.png，因此我只使用了来自互联网的一个）。

.abcde {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sky14 {
  color: #262626;
  display: block;
  flex-grow: 1;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abcde .Fresh.Mango {
  background-image: url(https://image.flaticon.com/icons/svg/8/8764.svg);
  cursor: pointer;
  width: 20px;
  height: 20px;
}

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>
  <body>
    <script>
      function MyNavigation() {
        alert("do something here");
      }
    </script>
    <div class="abcde" id="abcde">
      <div class="Fresh Mango" onClick="MyNavigation();"></div>
      <h1 class="sky14">Photo</h1>
      <div class="Fresh Orange"></div>
    </div>
  </body>
</html>

【讨论】：

非常感谢您的工作示例。你能告诉我删除 javascript:MyNavigation() 的好处吗？如果我想为不同类型的导航（例如主页、前进、页面顶部）使用相同的 div 是否更容易使用你的方法？或者我们如何更改
没问题。实际上，“我的方法”的优点是 1）js 与 html 分离，因此 2）更容易阅读代码，因为您不需要查看所有包含 js 和 html 的页面来查找发生了什么事件，并担心在调用之前定义所有需要的函数。但在您的情况下，使用内联 js 函数调用可能更容易。嗯，我不完全了解你的情况。不过，主要问题是关于按钮的可见性。 =) @user1788736
我试图把