时间戳

首页 > 解决方案 > 将图像定位在中心，左右两侧有内联href

html - 将图像定位在中心，左右两侧有内联href

问题描述

我正在尝试在导航栏的中心以及指向网站其他部分的左右链接上制作图片。我是如何试图让它看起来的。它适用于位置：绝对。可悲的是，链接停止工作。即使使用 position:absolute 也可以使链接工作的任何方式。还是有其他方法？

  

     body {
            box-sizing: border-box;
            margin-left: 0;
            margin-right: 0;
        
        }
        
        
         a {
            text-decoration: none;
            color: black;
        }
        
        a:hover{
            color: rgb(41, 171, 226);
        }
        
        li {
            display: inline-block;
            margin-right: 10px;
        } 
        
        .image{
            text-align: center;
            padding: 0 50%;
            display: inline-block;
        } 
        
        div{
            display: inline-block;
            padding: 0;
        }
        
        .navright{
            float: right;
              
        }
        
        .navleft{
            float: left;
            
        }
        
        .navleft01{
            padding: 0;
        }
        
        .navright01{
            padding: 0;
        }
        
        nav{
            margin-top: 1%;
            margin: 0 10%;
        } 
    <html>
    <body>
    
        <header>
            <nav class="navbar">
                <div class="image">
                        <a  href="#"><img src="images/place holder.png" alt="Placeholder" width="50" height="50"></a>
                </div>
                <div class="navleft">
                    <ul class="navleft01">
                        <li>
                            <a href="#">text1</a>
                        </li>
                        <li>
                            <a href="#">text2</a>
                        </li>
                        <li>
                            <a href="#">text3</a>
                        </li>
                    </ul>
                </div>
                <div class="navright">
                    <ul class="navright01">
                        <li>
                            <a href="#">text4</a>
                        </li>
                        <li>
                            <button type="button">button</button>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
    </body>
    
    </html>

标签： htmlcss

解决方案

ul我通过使用和标签更改您的代码li，但我仍然只使用 HTML 和 CSS：

/*body {
  margin: 0;
  padding: 0;
}*/



.navigation-bar {
  background-color: yellow;
  height: 70px;
  width: 100%;
  text-align:center;
  margin: auto;
}
/*.navigation-bar img{
float:center; //You don't need this because I write margin:auto in .navigation-bar
}*/
.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display:inline-block;
  vertical-align:top;
}
.navigation-bar ul.left {float: left}
.navigation-bar ul.right {float: right}

.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
}

.navigation-bar li a {
  color: black;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 0.7;
}
button{
  margin: 10px;
}
<html>
<body>

  <div class="navigation-bar">

      <ul class=left>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
      </ul>

      <img src="https://i.imgur.com/hCrQkJi.png">

      <ul class=right>
        <li><a href="#">About</a></li>
        <li><button>Result</button></li>
      </ul>
    </div>
</body>

</html>

推荐阅读