如果添加图像，锚点大小会发生变化

时间：2021-04-28 12:58:57

标签： html css

长话短说，我试图创建一个导航栏，但它似乎并没有像我希望的那样工作。问题是，如果我将图像（例如徽标）添加到最终令人惊叹的导航栏中，锚点的高度和位置会略有改变。带有文字的锚只有一种尺寸，带有图像的锚有点不同。我试图设置锚的高度，但这似乎没有帮助。

如果我把你搞糊涂了，这里是代码：

<head>
    <title></title>
    
    <style type="text/css">
        body {
            margin: 0 auto;
            font-family: Helvetica, Arial, sans-serif;
        }
        
        #topbar-navigation {
            width: 60%;
            margin: 0 auto;
            height: 40px;
        }
        
        #topbar-navigation ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        #topbar-navigation li {
            float: left;
        }
        
        #topbar-navigation li a {
            display: block;
            text-align: center;
            padding: 14px 14px;
            text-decoration: none;
            margin: 10px;

            background-color: #BFCDE3;

        }
        
        .topbar-border {
            float: left;
            border-left: 1px #CCCCCC solid;
            height: auto;
            margin: 0;
        }
        
        .topbar-text {
            font-weight: bold;
            font-size: 93%;
            position: relative;
            top: -2px;
        }
        
        #topbar-logo {
            float: left;
            height: 40px;
        }
        
        #logo {
            height: 32px;
            top: -7px;
            position: relative;
        }
        
        #signin-img {
            height: 25px;
            margin-right: 10px;
            margin-top: -5px;
        }
        
        #signin-span {
            position: relative;
            top: -7px;
            margin-right: 15px;
            font-weight: bold;
            font-size: 93%;
        }
        
        #bell-img {
            height: 25px;
            top: -5px;
            position: relative;
        }
        
        #more-span {
            position: relative;
            top: -5px;
            font-weight: bold;
            font-size: 93%;
            height: 40px;
        }
        
        #arrow-down-img {
            margin-left: 5px;       
            top: 10px;
            position: absolute;
            max-width: .9%;
            opacity: .6;
        }
    
    </style>
</head>

<body>
    <div id="topbar-navigation"> 
        <ul>
            <li id="topbar-logo"><a href=""><img id="logo" src="img/logo.png" alt=""></img></a></li>
            <li class="topbar-border" ><a href=""><img id="signin-img" src="img/signin.png" alt=""></img><span id="signin-span">Sign in</span></a></li>
            <li class="topbar-border"><a href=""><img id="bell-img" src="img/bell.png"></img></a></li>
            <li class="topbar-border topbar-text"><a href="">News</a></li>
            <li class="topbar-border topbar-text"><a href="">Sport</a></li>
            <li class="topbar-border topbar-text"><a href="">Weather</a></li>
            <li class="topbar-border topbar-text"><a href="">iPlayer</a></li>
            <li class="topbar-border topbar-text"><a href="">TV</a></li>
            <li class="topbar-border topbar-text"><a href="">Radio</a></li>
            <li class="topbar-border"><a href=""><span id="more-span">More</span><img  id="arrow-down-img" src="img/arrow-down.png" alt=""></img></a></li>
        </ul>
        
    </div>
    
</body>

1 个答案:

答案 0 :(得分：1)

如果您希望所有项目都具有相同的高度，请在代码中去掉浮点数和高度，并将 flex 应用于 ul。

#topbar-navigation ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex; //add this to take them in single line
        flex-wrap: wrap; //add this to wrap the items to next line when  space not available 
    }

如果您需要其他东西，请随时发表评论。

body {
            margin: 0 auto;
            font-family: Helvetica, Arial, sans-serif;
        }
        
        #topbar-navigation {
            width: 60%;
            margin: 0 auto;
        }
        
        #topbar-navigation ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
        }
#topbar-navigation ul li {display: flex;}
        

        #topbar-navigation li a {
            display: block;
            text-align: center;
            padding: 14px 14px;
            text-decoration: none;
            margin: 10px;

            background-color: #BFCDE3;

        }
        
        .topbar-border {
            border-left: 1px #CCCCCC solid;
            margin: 0;
        }
        
        .topbar-text {
            font-weight: bold;
            font-size: 93%;
            position: relative;
        }
        
        #topbar-logo {
            float: left;
        }
        
        #logo {

        }
        
        #signin-img {

        }
        
        #signin-span {
            position: relative;
            margin-right: 15px;
            font-weight: bold;
            font-size: 93%;
        }
        
        #bell-img {

            position: relative;
        }
        
        #more-span {
            position: relative;

            font-weight: bold;
            font-size: 93%;
        }
        
        #arrow-down-img {
            margin-left: 5px;       
            top: 10px;
            position: absolute;
            max-width: .9%;
            opacity: .6;
        }
<head>
    <title></title>
</head>

<body>
    <div id="topbar-navigation"> 
        <ul>
            <li id="topbar-logo"><a href=""><img id="logo" src="img/logo.png" alt=""></img></a></li>
            <li class="topbar-border" ><a href=""><img id="signin-img" src="img/signin.png" alt=""></img><span id="signin-span">Sign in</span></a></li>
            <li class="topbar-border"><a href=""><img id="bell-img" src="img/bell.png"></img></a></li>
            <li class="topbar-border topbar-text"><a href="">News</a></li>
            <li class="topbar-border topbar-text"><a href="">Sport</a></li>
            <li class="topbar-border topbar-text"><a href="">Weather</a></li>
            <li class="topbar-border topbar-text"><a href="">iPlayer</a></li>
            <li class="topbar-border topbar-text"><a href="">TV</a></li>
            <li class="topbar-border topbar-text"><a href="">Radio</a></li>
            <li class="topbar-border"><a href=""><span id="more-span">More</span><img  id="arrow-down-img" src="img/arrow-down.png" alt=""></img></a></li>
        </ul>
        
    </div>
    
</body>

相关问题
最新问题