如何使用CSS在頂部導航欄上添加后退按鈕？

Question

大家好，我想像圖像一樣在頂部導航欄上添加一個后退箭頭按鈕：

但是我當前的代碼根本沒有使用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>

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

如何使用CSS在頂部導航欄上添加后退按鈕？

問題描述

1 個解決方案

解決方案1
1 已采納 2019-04-05 00:41:29

如何使用CSS在頂部導航欄上添加后退按鈕？

問題描述

1 個解決方案

解決方案1 1 已采納 2019-04-05 00:41:29

解決方案1
1 已采納 2019-04-05 00:41:29