#html #css #alignment #dreamweaver
Вопрос:
У меня возникли некоторые проблемы с выравниванием нескольких различных элементов. У меня есть панель поиска, выпадающее окно, мой логотип и 4 кнопки навигации, и я хочу, чтобы мой логотип был вверху слева, за ним следовали выпадающее окно и 4 кнопки навигации, так что это выглядит как 5 кнопок навигации, 1 из которых является выпадающим окном, за которым следует моя строка поиска (которую я сделаю так, чтобы, когда вы наберете ее, остальная лента вверху исчезла, поэтому ее одна большая панель поиска, оставляя только логотип, панель поиска и кнопку «Связаться с нами», кнопка «Связаться» будет в правом верхнем углу. Вот как это выглядит до сих пор.
@charset "utf-8"; /* CSS Document */ .dropbtn { background-color: #D11C1F; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; 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; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #5E5A5A; } form { background-color: #4654e1; width: 300px; height: 44px; border-radius: 5px; display: flex; flex-direction: row; align-items: center; } input { all: unset; font: 16px system-ui; color: #fff; height: 100%; width: 100%; padding: 6px 10px; } ::placeholder { color: #fff; opacity: 0.7; } button { all: unset; cursor: pointer; width: 44px; height: 44px; } svg { color: #fff; fill: currentColor; width: 24px; height: 24px; padding: 10px; } .searchbar { display: inline-block; float: right; } body { margin: 0; padding: 0; font-size: 15px; } /* Navigation */ nav { float: left; margin: 0; overflow: hidden; text-align: center; } nav ul { margin: 0; padding: 0; } nav ul li { display: inline-block; list-style-type: none; } navgt;ulgt;ligt;a { color: #aaa; display: block; line-height: 2em; padding: 0.5em 1em; text-decoration: none; } .logo-img { float: left; position: relative; margin: 10px 15px 15px 10px; } .bg-div { background: white; overflow: hidden; } lt;div class="dropdown"gt; lt;button class="dropbtn"gt;About Uslt;/buttongt; lt;div class="dropdown-content"gt; lt;a href=""gt;Awardslt;/agt; lt;a href="Employees.html"gt;Employeeslt;/agt; lt;a href=""gt;FAQlt;/agt; lt;a href="#"gt;Overviewlt;/agt; lt;/divgt; lt;/divgt; lt;div class="searchbar"gt; lt;form id="form" role="search"gt; lt;input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content"gt; lt;buttongt; lt;svg viewBox="0 0 1024 1024"gt;lt;path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"gt;lt;/pathgt;lt;/svggt; lt;/buttongt; lt;/formgt; lt;/divgt; lt;div class="bg-div"gt; lt;img class="logo-img" src="Assets/Logo Light.png" width="520" height="240" alt="align box" ALIGN="CENTER"gt; lt;navgt; lt;ulgt; lt;ligt;lt;a href="#"gt;Nav 1lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Nav 2lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Nav 3lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Nav 4lt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt; lt;/divgt; Ответ №1:
Просто поместите раскрывающийся список «О программе» внутри lt;navgt; .это позволит вашему контенту отображаться в одной строке. вот как это выглядит;
lt;navgt; lt;ulgt; lt;div class="dropdown"gt; lt;button class="dropbtn"gt;About Uslt;/buttongt; lt;div class="dropdown-content"gt; lt;a href=""gt;Awardslt;/agt; lt;a href="Employees.html"gt;Employeeslt;/agt; lt;a href=""gt;FAQlt;/agt; lt;a href="#"gt;Overviewlt;/agt; lt;/divgt; lt;/divgt; lt;ligt;lt;a href="#"gt;Nav 1lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Nav 2lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Nav 3lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Nav 4lt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt;