html - Logo 和导航栏一一对应

标签 html css

我尝试了我所知道的一切,但没有任何帮助 0.0 。我进行了研究,但找不到我的代码中的问题所在。

我希望导航栏和 Logo 在同一行上:/ http://prntscr.com/b0z7sp 这是代码

<html>
<head>
    <meta charset="UTF-8"/>
    <title>ООУ "Јосип Броз Тито"</title>
    <link rel="stylesheet" type="text/css" href="stilovi.css">
</head>
<body>
<div id = "glavendrzac">

    <div id = "logoimeni">
    <div class = "logopozicija">
        <img src="sliki/logo.png"/>
    </div>
    <div class = "menidologo">
        <ul>
            <li><a href="index.php">Почетна</a></li>
            <li><a href="kontakt.php">Контакт</a></li>
            <li><a href="novsti.php">Новости</a></li>
            <li><a href="korisnici.php">Корисници</a></li>
        </ul>
    </div>
    </div>
    <div id = "sliki">

        <div class = "profesor">
            <img src="sliki/profesor.png" width="270px"; height="450px";/>
        </div>
        <div id = "tabla">
            <div class = "tablatekst">
                <h2>Јосип Броз Тито</h1>
                Училиштето Јосип Броз Тито го добило името по претседателот на Југославија 'Јосип Броз Тито'. Училиштето најпрво се наоѓало во близина на сегашното а сега на тоа место
                се наоѓа спротската сала 'Филип II Македонски". Оваа спортска сала ја користат учениците за часот по Фискултура, а во неа исто така се одржуваат некои спортски
                натпревари и тренинзи. Во 1980 година старото училиште изгорело па е изградено ново училиште и во негов состав влегуваат:<br>
                - Самото училиште<br>
                - Едно игралиште<br>
                - Една спортска сала<br>

            </div>
        </div>
    </div>
</div>

<?php
//
?>
</body>
</html>

这是 CSS

#glavendrzac 
{
    margin-left: 200px;
    margin-right: 200px;
    border: 2px solid black;
    border-radius: 8px;
    overflow: auto;
}
#sliki 
{
    border-top: 2px solid black;
} 
.profesor 
{
    float: left;
    margin-top:60px;
}
#tabla 
{
    margin-top: 50px;
    margin-left: 30px;
    border: 1px solid black;
    border-radius: 20px;
    background: url("sliki/tabla.png");
    background-size: cover;
    margin-right:30px;
    margin-bottom: 30px;
}
.tablatekst 
{
    margin-top: 30px;
    margin-left: 40px;
    margin-bottom: 30px;
    margin-right: 40px;
    color: white;
    text-decoration: bold;
    font-weight: bold;
    font-size: 20px;
}

.logopozicija
{
    width: 450px;
}

.menidologo
{
    width: 600;
    white-space: nowrap;
}

.menidologo ul
{
    margin: 0px;
    padding: 0px;
}

#logoimeni
{
    z-index: 1;

}

最佳答案

对于 .logopozicija 使用 float:left 对于 .menidolog 使用 float:right

关于html - Logo 和导航栏一一对应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37074791/

相关文章:

html - 我的横幅图片未使用 "@media (min-width: 320px) and (max-width:767px)"显示

html - bulma 中相同大小的标签

javascript - 检查在 HTML picture 元素中加载了什么图像

javascript - 为什么此切换功能仅在以某种方式加载元素时才起作用?

html - 如何在不添加/删除/编辑设计和 CSS 的情况下为纵向和横向模式进行响应式设计?

html - 如何卡住页面的标题

javascript - 单击按钮时删除数组项

html - 如何正确定位导航栏

html - 如何动态调整其中包含背景图像的 div 的大小?

html - Chrome 和 Camino 中的奇怪 div 行为,但在 Safari 中没有