Question

代码：

＆＃13;

 html {
   position: relative;
   min-height: 100em;
 }
 body {
   position: relative;
   margin: 0;
   padding: 0;
   font-family: "Calibri", Arial Narrow, Arial, sans-serif;
   ;
   background-color: #E6E6E6;
 }
 .container {
   position: relative;
   min-height: 100em;
   min-height: 100%;
 }
 .navigation-bar {
   position: fixed;
   left: 0;
   top: 0;
   background-color: #FFFFFF;
   width: 100%;
   line-height: 72px;
   height: 80px;
   min-width: 100em;
   box-shadow: 0px 0px 2px 0px;
 }
 .navigation-bar .search-box {
   background-image: url(file:///E:/Personal/Stuck/images/ic_search_black_24dp_stuck.png);
   background-repeat: no-repeat;
   background-position: left center;
   padding-left: 30px;
   outline: none;
   font-size: 17px;
   height: 45px;
   width: 550px;
   color: #585858;
   border: 1px solid transparent;
   background-color: rgba(0, 0, 0, .09);
   border-radius: 2px;
 }
 .navigation-bar .search-button {
   font-size: 17px;
   height: 45px;
   border-radius: 2px;
   border: 1px solid transparent;
   background-color: #3399FF;
   color: #FFFFFF;
   margin-left: 3px;
   background-image: url(file:///E:/Personal/Stuck/images/ic_search_white_24dp_stuck.png);
   background-repeat: no-repeat;
   background-position: center;
 }
 .navigation-bar .search-button:hover {
   background-color: #3391FF
 }
 .navigation-bar-item {
   margin-left: 20px;
   margin-right: 20px;
   text-decoration: none;
   color: #585858;
   cursor: pointer;
 }
 .navigation-bar .stuck {
   font-size: 30px;
   margin-left: 60px;
   padding-top: 16px;
   padding-bottom: 25px;
   color: #585858;
 }
 .navigation-bar .account {
   margin-left: 40px;
 }
 .material-icons.md-24 {
   font-size: 24px;
 }
 .material-icons.md-light {
   color: #585858;
 }
 .navigation-bar .all-text-items {
   padding-top: 28px;
   border: 1px solid transparent;
   padding-bottom: 29px;
   background-color: transparent;
   transition-duration: .2s;
 }
 .navigation-bar .all-text-items:hover {
   border-bottom-color: #585858;
   background-color: rgba(0, 0, 0, .09)
 }
 .navigation-bar .nav-items {
   font-size: 12px;
   background-color: transparent;
 }
 .stuck-logo-container {
   display: inline;
 }

＆＃13;

<html>

<head>
  <title>Stuck | Shop over Millions of Prodcts</title>
  <link rel="stylesheet" type="text/css" href="styles/stuck.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="navigation-bar">
      <a class="navigation-bar-item stuck" href="#">stuck</a>
      <input type="search" class="search-box" placeholder="So, what are you looking for today?">
      <input type="submit" class="search-button">
      <a class="navigation-bar-item account all-text-items" href="#"><span class="nav-items"><i class="material-icons md-24 md-light">account_circle</i>Account</span></a>
      <a class="navigation-bar-item cart all-text-items" href="#"><span class="nav-items"><i class="material-icons md-24 md-light">shopping_cart</i>Cart</span></a>
      <a class="navigation-bar-item notifications all-text-items" href="#"><span class="nav-items"><i class="material-icons md-24 md-light">notifications_active</i>Notifications</span></a>
      <a class="navigation-bar-item more all-text-items" href="#"><span class="nav-items"><i class="material-icons md-24 md-light">more</i>More</span></a>
      <a class="navigation-bar-item help all-text-items" href="#"><span class="nav-items"><i class="material-icons md-24 md-light">call</i>Help</span></a>
    </div>
    <div class="footer"></div>
  </div>
</body>

</html>

＆＃13;

Answer 1

您需要添加text-indent

.navigation-bar .search-button{
  font-size: 17px;
  height: 45px;
  border-radius: 2px;
  border: 1px solid transparent;
  background-color: #3399FF;
  color: #FFFFFF;
  margin-left: 3px;
  background-image: url(http://cdn5.iconfinder.com/data/icons/30_Free_Black_ToolBar_Icons/40/Black_Circle-Arrow.png);
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -220px;
  overflow: hidden;
  width: 50px; /*you can change the width according to you need*/
}

Answer 2

将text-indent: -9999px;添加到您的.navigation-bar .search-button课程规则中。

如何删除按钮徽标后面的文字？

2 个答案: