Блог

Главная - Вопросы по программированию - Как поместить список по горизонтали, начиная с другого элемента (например, с элемента ввода)

Как поместить список по горизонтали, начиная с другого элемента (например, с элемента ввода)

#html #css

#HTML #css

Вопрос:

Я пытался «клонировать код» веб-сайта GitHub, и я застрял на том, как разместить список по горизонтали. (как показано здесь)

Вот мой код CSS :

 #section1{
  background-color: black;
  height: 7%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  float: left;
}

#logo1{
  position: relative;
  left: 2%;
  top: 13px;
  margin-right: 60px;
}

#searchBar{
  height: 20px; 
  width: 250px;
  border-radius: 5px;
  background-color: transparent;
  border-width: 3px;
  border-color: rgb(180,180,180);
  padding: 7px;
}

input[id^="searchBar"]::placeholder {
  color: rgb(220,220,220)
}

И вот мой HTML-код :

 <!DOCTYPE html>
<html>
   <head>
      <Title></Title>
      <link rel = "stylesheet" href = "clone1.css">
   </head>
   <body>
      <section id = "section1">
         <a href = "https://github.com/">
            <img id = "logo1" src = "img/logo1.png">
         </a>
         <input id = "searchBar" type = "text" placeholder="search or jump to...">
         <span>Pull</span>
            <ul>
               <li>Pull requests</li>
            </ul>
      </section>
   </body>
</html>

Я ожидал, что список начнется рядом с панелью поиска, потому что в разделе 1 есть CSS-код «float: left».
Кто-нибудь может сказать мне, как я могу расположить список по горизонтали, начиная с панели поиска?

Ответ №1:

Добавлено:

 #section1 > * { display:inline-block; }

Не стесняйтесь настраивать CSS для более точного соответствия вашим требованиям. Выбранный inline-block как размерный стиль вступит в силу (например padding , и margin ).

ПРИМЕЧАНИЕ: это, по-видимому, «наследие«.

 #section1{
    background-color: black;
    height: 7%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    float: left;
}

#logo1{
    position: relative;
    left: 2%;
    top: 13px;
    margin-right: 60px;
}

#searchBar{
    height: 20px; 
    width: 250px;
    border-radius: 5px;
    background-color: transparent;
    border-width: 3px;
    border-color: rgb(180,180,180);
    padding: 7px;
}

input[id^="searchBar"]::placeholder {
    color: rgb(220,220,220)
}
#section1 > * { display:inline-block; } 
 <!DOCTYPE html>
<html>
    <head>
        <Title></Title>
        <link rel = "stylesheet" href = "clone1.css">
    </head>
    <body>
        <section id = "section1">
            <a href = "https://github.com/">
                <img id = "logo1" src = "img/logo1.png">
            </a>
            <input id = "searchBar" type = "text" placeholder="search or jump to...">
            <span>Pull</span>
            <ul>
                <li>
                    Pull requests
                </li>
            </ul>
        </section>
    </body>
</html>

Комментарии:

1. Чтобы прояснить, что происходит, ul это то, что известно как block элемент, что означает, что по умолчанию он начинается с новой строки. Изменяя все непосредственные дочерние элементы section1 to display:inline-block , это позволяет размещать соответствующие элементы не на новой строке, а на одной строке друг за другом.