размещение lo go на панели навигации влияет на весь текст на панели навигации - PullRequest
Новая
       20

размещение lo go на панели навигации влияет на весь текст на панели навигации

1 голос
/ 26 мая 2020

У меня проблема с навигационной панелью веб-сайта, она слишком широка из-за того, что я go поставил, и это влияет на текст, заставляя их все прилипать к верху, как я могу сделать текст или go выровнять с каждым другое? 

<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #242626;
  font-family: Arial, Helvetica, sans-serif;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: #cedacb;
  text-align: center;
  padding: 14px 16px;
  widht: 120px;
  min-height: 60px;
  vertical-align: top;
  text-decoration: none;
}

li a:hover {
  color: white;
}

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#home {
  width: 120px;
  height: 60px;
  background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}

#logo { 
  float: left; 
}

</style>
</style>
</head>
<body>

<ul>
  <li><a href="#home"><img id="home" src="https://st.deviantart.net/minish/main/logo/card_black_large.png" alt="Logo" id="logo"></a></li>
  <li><a href="#search">Search</a></li>
  <li><a href="#news">Submit</a></li> 
  <li class="dropdown" style="float:right;">
    <a href="javascript:void(0)" class="dropbtn">Notification</a>
    <div class="dropdown-content" style="right:0;">
      <a href="#">All Inbox</a>
      <a href="#">Inbox</a>
      <a href="#">Watch</a>
      <a href="#">Note</a>
    </div>
  </li>
</ul>

</body>
</html>`

Навигационная панель веб-сайта, над которой я работаю:

И чтобы уточнить, нет, я не работаю на Deviantart, я выбираю изображение для lo go практики, и хорошо, что сначала он не подошел бы, тогда я изменил код, чтобы я мог разместить его на панели навигации с помощью этого кода 

#home {
width: 120px;
height: 60px;
background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}

, и он прикручивает текст к navbar, как я могу это исправить, чтобы они все выровнялись вместе?

Ответы [ 3 ]

0 голосов
/ 26 мая 2020

Вот решение. Я немного изменил структуру html. Если вам нужно что-то еще, дайте мне знать. Спасибо. 

<html><head>
    <style>
    
        #home {
width: 120px;
height: 60px;
background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style>
</head>
<body>
    

<style>
ul {
  list-style-type: none;
  height:60px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #242626;
  font-family: Arial, Helvetica, sans-serif;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: #cedacb;
  text-align: center;
  padding: 14px 16px;
  widht: 120px;
  min-height: 60px;
  vertical-align: top;
  text-decoration: none;
}

li a:hover {
  color: white;
}

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#home {
  width: 120px;
  height: 60px;
  background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}

#logo { 
  float: left; 
}

</style>




<div class="navbar" style="
    /* float: unset; */
    background: black;
    /* height: 70px; */
">
<a href="#home" style="float: left;"><img id="home" src="https://st.deviantart.net/minish/main/logo/card_black_large.png" alt="Logo"></a>

<ul style="
    /* float: left; */
">
  
  <li><a href="#search">Search</a></li>
  <li><a href="#news">Submit</a></li> 
  <li class="dropdown" style="float:right;">
    <a href="javascript:void(0)" class="dropbtn">Notification</a>
    <div class="dropdown-content" style="right:0;">
      <a href="#">All Inbox</a>
      <a href="#">Inbox</a>
      <a href="#">Watch</a>
      <a href="#">Note</a>
    </div>
  </li>
</ul></div>

<script type="text/javascript">
        
    </script>

<div class="as-console-wrapper"><div class="as-console"></div></div></body></html>
0 голосов
/ 26 мая 2020

Вы пытаетесь сделать это? ( Нажмите, чтобы увидеть результат этого кода ) 

    <head>
        <title>Nav-bar</title>
        <style>
            body{
                margin: 0;
            }
            .navbar{
                width: 100%;
                height: 60px;
                background-color: #242626;
                font-family: Arial, Helvetica, sans-serif;

            }
            .nav-brand{
                width: 120px;
                height: 60px;
                display: inline-block;
            }

            .nav-item{
                align-items: left;
                display: inline-block;
                float: right;
            }

            .nav-item ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                font-family: Arial, Helvetica, sans-serif;
                display:table-cell;
                vertical-align: middle;
                height: 60px;
            }

            .nav-item ul li{
                float: left;
                padding-right:30px;

                padding-top: 5px;
                margin: 0 auto;

            }

            .nav-item ul li a{
                color: aliceblue;
                text-decoration: none;
                font-family: candara;
            }

    <style>
    .dropdown {
    position: relative;
    display: inline-block;
    }

    #dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    #dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    }

    #dropdown-content a:hover {
    background-color: #f1f1f1;
    color: black;
    }

    .dropdown:hover #dropdown-content {
    display: block;
    }

    #home {
    width: 120px;
    height: 60px;
    background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
    }

    #logo { 
    float: left; 
    }

    </style>

        </style>
    </head>

    <body>
        <div class="navbar">
            <div class="nav-brand">
                <span class="brand-img">
                    <img id="home"  src="https://st.deviantart.net/minish/main/logo/card_black_large.png" alt="Logo" 
                    width="100%" height="60px">
                </span>
            </div>
                <div class="nav-item">
            <ul>

                    <li><a href="#search">Search</a></li>
                    <li><a href="#submit">Submit</a></li>
                    <li class="dropdown"><a  href="javascript:void(0)" class="dropbtn">Notification</a>
                    <div id="dropdown-content" style="right:0;">
                        <a href="#">All Inbox</a>
                        <a href="#">Inbox</a>
                        <a href="#">Watch</a>
                        <a href="#">Note</a>
                    </div></li>
                </div>
            </ul>
        </div>
    </body>

    </html>

( Нажмите, чтобы увидеть результат этот код )

0 голосов
/ 26 мая 2020

Вы можете применить flex к родительскому элементу (ul), дать ему имя класса, чтобы он не применялся ко всем вашим (ul), попробуйте следующее: 

ul.navbar-list {

    display:flex; 

    align-items:center;

    flex-wrap:wrap;

}

удачи.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...