时间戳

首页 > 解决方案 > Html：尝试将导航块与 svg 图像并列

html - Html：尝试将导航块与 svg 图像并列

问题描述

我会在我的网站（它是photoshopped图片）中创建这个东西，左边是一本书的svg图片，右边是一个“导航块”。导航块是重定向到其他页面但完成的链接列表。 在此处输入图像描述

不幸的是，我现在用我的代码得到了这个： 在此处输入图像描述 这是：

    <div id="custom-bg">
        <div id="alpha-layer">
            <div id="top-section">
                <div id="book">
                    <img src="img/book.svg" width="100">
                </div>
                <!-- nav -->
                <nav class="nav-bar">
                    <ul>
                        <!--<li class="nav-button">
                        <a href="index.html">Index</a>
                            </li>-->
                            <li class="nav-button">
                                <a href="ada bio.html">Biographie</a>
                            </li>
                            <li class="nav-button">
                                <a href="site.html">Programme Ada</a>
                            </li>
                            <li class="nav-button">
                                <a href="babbage.html"> La machine de Babbage</a>
                            </li>
                            <li class="nav-button">
                                <a href="#">Exemple de progamme Ada</a>
                            </li>
                            <li class="nav-button">
                                <a href="bibliographie.html">Bibliographie</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

和我的 css 文件：

html,

body {
    background-image: url("../img/bg32.svg");
    padding : 0px ;
    margin: 0px;
}

div#custom-bg {
    background-image: url("../img/bg32.svg");
    background-repeat: no-repeat;
    background-position : center;
    background-attachment: fixed;
    background-size: cover;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 0%;
    padding-top: 0%;
    max-height: 100%;
    max-width: 100%;
}

div#alpha-layer {
    background-color: rgba(255,255,255,0.25);
    padding : 25px;
}

div#top-section {
    display: inline-block;
}


nav.nav-bar ul li.nav-button {
    list-style-type: none;
}

nav.nav-bar ul li.nav-button a {
    background-color: grey;
    text-decoration: none;
    transition: 0.5s all;
    color : white;
    display: block;

    padding: 10px;
    width: 250px;
}

nav.nav-bar ul li.nav-button a:hover {
    background-color: darkgrey;
    text-decoration: none;
    transition: 0.5s all;
    color : white;

    padding: 10px;
}

div#book {
    vertical-align: top;
}
div.nav-bar {
    margin: 0px;
    padding: 0px;
}

我应该添加/更改什么来获得这个结果？

标签： htmlcss

解决方案

只需设置display:inline-block为彼此相邻的两个 div (#book和.nav-bar)：

.nav-bar, #book {
    display:inline-block;
}

说明：默认情况下，div元素的显示为block，这意味着它们将始终呈现在“新行”上，并且它们之后的任何内容也将呈现在它们下方。通过将 display 设置为inline-block，我们将移除此效果，同时仍保留 div 的宽度和高度（与inline示例不同）。

下面是一个工作片段：

html,

body {
    background-image: url("../img/bg32.svg");
    padding : 0px ;
    margin: 0px;
}

div#custom-bg {
    background-image: url("../img/bg32.svg");
    background-repeat: no-repeat;
    background-position : center;
    background-attachment: fixed;
    background-size: cover;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 0%;
    padding-top: 0%;
    max-height: 100%;
    max-width: 100%;
}

div#alpha-layer {
    background-color: rgba(255,255,255,0.25);
    padding : 25px;
}

div#top-section {
    display: inline-block;
}


nav.nav-bar ul li.nav-button {
    list-style-type: none;
}

.nav-bar, #book {
    display:inline-block;
}
<div id="custom-bg">
        <div id="alpha-layer">
            <div id="top-section">
                <div id="book">
                    <img src="img/book.svg" width="100">
                </div>
                <!-- nav -->
                <nav class="nav-bar">
                    <ul>
                        <!--<li class="nav-button">
                        <a href="index.html">Index</a>
                            </li>-->
                            <li class="nav-button">
                                <a href="ada bio.html">Biographie</a>
                            </li>
                            <li class="nav-button">
                                <a href="site.html">Programme Ada</a>
                            </li>
                            <li class="nav-button">
                                <a href="babbage.html"> La machine de Babbage</a>
                            </li>
                            <li class="nav-button">
                                <a href="#">Exemple de progamme Ada</a>
                            </li>
                            <li class="nav-button">
                                <a href="bibliographie.html">Bibliographie</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

推荐阅读