탐색 모음에서 내 입력 영역을 오른쪽으로 띄울 방법이 없습니다.

debugcn 에 게시 Dev

Leowebdev

내 입력 필드 (검색 상자)와 관련 아이콘 (돋보기 렌즈)을 float내 웹 사이트의 탐색 모음 오른쪽 으로 만드는 방법을 찾을 수 없습니다 ( 내 로고는 탐색 왼쪽에두고 있음). 어떠한 제안?

HTML :

 <nav>
        <div class="nav-container">
            <div class="logo">
                <a href="">
                    <h1>MyWebsiteName.com</h1>
                </a>
            </div>
            <form action="javascript:redirect()" autocomplete="off">
                <input type="search" name="search" id="search" class="form-control">
                <ul class=mylist list-group" id="result"></ul>  <!--this line is for JS-->
                <button type="submit">
                   <svg width="50" height="50" viewBox="0 0 77 77" fill="none" 
                           xmlns="http://www.w3.org/2000/svg">
                   </svg> </button>
            </form>

        </div>
</nav>

CSS :


.nav-container {
  display: flex;
  align-items: center;
  padding: 16px 0;
  position: relative;
}
.nav-container form {
  display: flex;
  align-items: center;
  justify-content: center;
}
nav input {
  font-size: 1.20em;
  border: solid 2px #E5E5E5;
  border-radius: 25px;
  background: none;
  color: #F4F4F4; 
  padding: 14px;
  margin: 0 20px 0 0;
  width: 260px;
}
form {
  float: right;
}

요하네스

margin-left: auto;대신 양식에 사용하십시오 float: right.-플렉스 컨테이너 ( .nav-container) 내부에 있습니다. 여기서 float는 효과적이지 않지만 margin-left: auto최대한 오른쪽으로 이동합니다.

.nav-container {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 0;
  position: relative;
}

.nav-container form {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav input {
  font-size: 1.20em;
  border: solid 2px #E5E5E5;
  border-radius: 25px;
  background: none;
  color: #F4F4F4;
  padding: 14px;
  margin: 0 20px 0 0;
  width: 260px;
}

form {
  margin-left: auto;
}

<nav>
  <div class="nav-container">
    <div class="logo">
      <a href="">
        <h1>MyWebsiteName.com</h1>
      </a>
    </div>
    <form action="javascript:redirect()" autocomplete="off">
      <input type="search" name="search" id="search" class="form-control">
      <ul class=mylist list-group " id="result "></ul>     <!-- this line is for JS -->
                <button type="submit ">
                   <svg width="50 " height="50 " viewBox="0 0 77 77 " fill="none " 
                           xmlns="http://www.w3.org/2000/svg ">
                   </svg> </button>
            </form>

        </div>
</nav>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

탐색 모음에서 내 입력 영역을 오른쪽으로 띄울 방법이 없습니다.

탐색 모음에서 내 입력 영역을 오른쪽으로 띄울 방법이 없습니다.

ul을 오른쪽으로 띄울 때 div가 다음 줄에 나오지 않는 이유는 무엇입니까?

내 부트 스트랩 탐색 모음이 화면에서 오른쪽으로 이동하지만 왼쪽에서 들여 쓰기됩니다.

제한된 영역 만 다른 영역에는 색이 없도록 배경 영역을 제어하는 방법은 무엇입니까?

내 사이트의 탐색 및 상단 섹션이 태블릿에서 오른쪽으로 푸시되는 이유는 무엇입니까?

resposive 오른쪽 탐색 모음 아이콘을 만드는 방법은 무엇입니까?

탐색 모음의 검색 양식을 왼쪽으로 당기기 / 오른쪽으로 당기기가 Chrome에서 제대로 작동하지 않습니다.

입력기 서비스에서 탐색 모음의 색상을 변경하는 방법은 무엇입니까?

서랍 탐색기 도구 모음에서 아이콘을 오른쪽으로 이동

내 페이지의 콘텐츠 앞에 내 스티커 탐색 모음을 가져 오는 방법은 무엇입니까?

HTML 에서처럼 태그 안의 요소를 왼쪽이나 오른쪽으로 어떻게 띄울 수 있습니까?

대학 프로젝트에서 내 드롭 다운 탐색 모음을 중앙에 배치하는 방법에 대한 조언을 찾고 있습니다.

PersistentVolume을 한 영역에서 다른 영역으로 이동하는 방법은 무엇입니까?

내 탐색 모음이 이미지의 중앙에 영향을주는 이유는 무엇입니까?

배열을 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 이동하는 방법은 무엇입니까?

GetSkeleton을 사용하여 하나의 'div'를 가운데에 맞추고 다른 'div'를 오른쪽으로 띄우는 방법은 무엇입니까?

변수를 찾을 수 없음 : 스택 탐색기 내부에서 내부를 탐색하려고 할 때 탐색 오류가 발생했습니다.

버튼을 오른쪽으로 이동하고 입력을 확장하여 공간을 채울 수 없습니다.

오른쪽에서 왼쪽으로 접어서 한 이동 내에없는 튜플을 제거하는 방법이 있습니까?

왼쪽 / 오른쪽으로 이동하는 탐색 모음

텍스트 입력 부분을 오른쪽에서 왼쪽으로 슬라이드하는 검색 애니메이션 만들기

내 HTML 입력 영역을 중앙에 배치 할 수 없습니다.

내 버튼이 javascript DOM을 통해 왼쪽에서 오른쪽 상단으로 이동하지 않습니다.

ActionBar에서 탐색 드롭 다운을 오른쪽 정렬하는 방법은 무엇입니까?

KDE Neon에서 KDE 연결을 통해 내 안드로이드 폰을 탐색 할 수 없습니다.

내 탐색 모음이 텍스트 위에 표시되고 Li는 탐색 모음에도 없습니다.

각 다각형 영역 내에서 0이 아닌 모든 픽셀을 효율적으로 계산하는 방법은 무엇입니까?

탐색 창에서 이미지 오른쪽에 텍스트보기를 넣을 수 없습니다.

MATLAB의 흑백 이미지에서 특정 흰색 영역 (더 큰 영역)을 검정색으로 변환하는 방법은 무엇입니까?

CSS에서 가로로 탐색 모음을 정렬하는 방법은 무엇입니까?