Question

我在一个网站上工作，并且试图制作一个顶部导航栏。最左边的链接应该是带有我的徽标的图像，其他链接应该导航到网站的不同部分。带有图像的按钮的排列方式与其他按钮不同。我该如何解决？

<div id='topbar'>
    <a href='index.html' class='topbar-button-home'>
        <img src='camelCaseCo_centered_cropped_notext_bold_small.png'>
    </a>
    <a href='index.html' class='topbar-button'>Home</a>
    <a href='index.html' class='topbar-button'>2</a>
    <a href='index.html' class='topbar-button'>3</a>
    <a href='index.html' class='topbar-button'>4</a>
</div>

<style>
    #topbar {
        padding: 0;
        margin: 0;
        display: inline-block;
        font-size: 0;
    }

    .topbar-button {
        width: 200px;
        margin: 0px;
        padding: 20px;
        display: inline-block;
        border: solid black 1px;
        border-radius: 0px;
        text-decoration: none;
        color: black;
        text-align: center;
        font-family: "Google Sans", sans-serif;
        font-size: 14px;
    }

    .topbar-button-home {
        width: 50px;
        margin: 0px;
        padding: 8px;
        border: solid black 1px;
        display: inline-block;
        text-decoration: none;
        color: black;
        text-align: center;
        font-family: "Google Sans", sans-serif;
        font-size: 14px;
    }
</style>

谢谢！

Answer 1

Flexbox怎么样？

#topbar {
    padding: 0;
    margin: 0;
    display: flex;
}

.topbar-button {
    width: 200px;
    margin: 0px;
    padding: 20px;
    display: inline-block;
    border: solid black 1px;
    border-radius: 0px;
    text-decoration: none;
    color: black;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
}

.topbar-button-home {
    width: 50px;
    margin: 0px;
    padding: 8px;
    border: solid black 1px;
    display: inline-block;
    text-decoration: none;
    color: black;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
}

<div id='topbar'>
    <a href='index.html' class='topbar-button-home'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a>
    <a href='index.html' class='topbar-button'>Home</a>
    <a href='index.html' class='topbar-button'>2</a>
    <a href='index.html' class='topbar-button'>3</a>
    <a href='index.html' class='topbar-button'>4</a>
    <a href='index.html' class='topbar-button'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a>
</div>

在上面的示例中，所有flex子级的高度均相同，无论其内容如何。

Answer 2

请记住，图像是行内元素，因此它们受行高影响。尝试将图像设置为diasplay块或inline-block。我看到您在链接上拥有它-将其移至图像。

带有<img>标记的<a>标记与仅带有文本的<a>标记的排列不同。我怎样才能解决这个问题？

2 个答案: