Как исправить проблему с выравниванием div, float и border - PullRequest
Новая
       1

Как исправить проблему с выравниванием div, float и border

0 голосов
/ 02 декабря 2018

Я пытаюсь получить список справа, а hi (логотип) слева - на одном уровне и внутри черной сплошной границы размером 1 пиксель с белым фоном.

Я попытался поместить div вокруг всего заголовка и nav с именем #top, но только раздел заголовка получает инструкции css div id=top.

Пожалуйста, укажите на все, что вы видите, я делаю не так.Как я закончил делать идентификаторы, классы и деления? 

**html**

    <body id="body">
<!-----------------------------------HEADER------------------------------------------->     
        <div id="top">

            <header id="header">
                <h1>Icon Share</h1>
            </header>

            <div class="clear"></div>
        <!-----------------------------------NAV---------------------------------------------->
                <nav id="nav-top" class="nav">

                <div class="clear"></div>

                    <div id="top-link">
                    <div class="clear"></div>
                            <div id="id-select">
                                <select>
                                    <option value="english">English</option>
                                    <option value="chinese">Chinese</option>
                                    <option value="spanish">Spanish</option>
                                    <option value="portugese">Portugese</option>
                                </select>
                            </div>

                            <div class="div-list">
                                <ul class="list" id="list1">
                                    <li><a href="register.html">Register</a></li>
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="projects.html">Projects</a></li>
                                    <li><a href="about.html">About</a></li>
                                </ul>
                            </div>
                    </div>

                </nav>

        </div>


<!----------------------------------MAIN---------------------------------------------->
            <div class="clear"></div>

Ниже мой код CSS.

**css**

    * {
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

.clear {
    clear: both;
}

body {
    background-color: #37acc5;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

#top {
    border: 1px solid #262626;
    background-color: #ffffff;
}

header {
    float: left;
}

a {
    text-decoration: none;
    color: #262626;
}

li {
    list-style-type: none;

}

header h1 {
    color: #262626;

}

#nav-top {
    float: right;
}

#list1 li{
    float: right;
}

#footer1 {
    float: left;
}

#footer2 {
    float: right;
}

1 Ответ

0 голосов
/ 02 декабря 2018

У вас есть некоторый ненужный код <div class="clear"></div> здесь.Очистить очищает все с обеих сторон при использовании clear: both;, удалите их и поместите только один непосредственно перед закрывающим тегом #top, и понадобится немного дополнительной CSS.

Я привел пример ниже (хотя вы могли бы использоватьflex-элементы, если вы хотите немного изменить html): 

/* -- NEW CSS -- */

#nav-top
{
   min-height: 40px;
}

#top-link > div
{
   display: inline-block;
   vertical-align: middle;
   line-height: 40px;
}

#top
{
    border: 1px solid #262626;
    padding: 0 15px;
    background-color: #ffffff;
    line-height: 40px;
}

.nav .div-list .list > li
{
  padding-left: 15px;
}

/* -- END -- */

* {
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

.clear {
    clear: both;
}

body {
    background-color: #37acc5;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    float: left;
}

a {
    text-decoration: none;
    color: #262626;
}

li {
    list-style-type: none;

}

header h1 {
    color: #262626;

}

#nav-top {
    float: right;
}

#list1 li{
    float: right;
}

#footer1 {
    float: left;
}

#footer2 {
    float: right;
}
<div id="top">

   <header id="header">
      <h1>Icon Share</h1>
   </header>

   <!-----------------------------------NAV---------------------------------------------->
   <nav id="nav-top" class="nav">

      <div id="top-link">
         <div id="id-select">
            <select>
               <option value="english">English</option>
               <option value="chinese">Chinese</option>
               <option value="spanish">Spanish</option>
               <option value="portugese">Portugese</option>
            </select>
         </div>

         <div class="div-list">
            <ul class="list" id="list1">
               <li><a href="register.html">Register</a></li>
               <li><a href="login.html">Login</a></li>
               <li><a href="projects.html">Projects</a></li>
               <li><a href="about.html">About</a></li>
            </ul>
         </div>
      </div>

   </nav>

   <div class="clear"></div>
   
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...