반응형

CSS 12

부트스트랩은 나비 막대 항목을 오른쪽으로 정렬합니다.

부트스트랩은 나비 막대 항목을 오른쪽으로 정렬합니다. 탐색 막대 항목을 오른쪽으로 정렬하려면 어떻게 해야 합니까? 로그인을 하고 오른쪽으로 등록하고 싶습니다.하지만 내가 시도하는 모든 것들이 효과가 없는 것 같습니다. 이것이 지금까지 제가 시도한 것입니다. 을다다ehteb:.. .style="float: right" 을다다ehteb:.. .style="text-align: right" 에 그 두 .꼬리표들 을 다시 해 보았습니다.!importantd 변경되었다.nav-itemnav-right 가 추가된pull-sm-right에 걸맞은 가 추가된align-content-end에 걸맞은 이게 내 암호입니다. Navbar Home (current) Features Pricingg Login Register @..

programing 2023.09.08

하나의 요소에 두 개의 CSS3 박스 그림자를 사용하는 방법이 있습니까?

하나의 요소에 두 개의 CSS3 박스 그림자를 사용하는 방법이 있습니까? 저는 두 개의 그림자가 있는 포토샵 모형으로 단추 스타일을 복제하려고 합니다.첫 번째 그림자는 내부 라이터 박스 그림자(2px)이고, 두 번째 그림자는 버튼(5px) 자체 외부의 드롭 그림자입니다. 포토샵에서 이것은 쉽습니다 - 내부 그림자와 드롭 그림자.CSS에서는 하나 또는 다른 하나를 가질 수 있지만, 동시에 둘 다 가질 수는 없습니다. 아래 코드를 브라우저에서 시도하면 상자 그림자가 삽입된 상자 그림자보다 우선합니다. 삽입 상자 그림자는 다음과 같습니다. box-shadow: inset 0 2px 0px #dcffa6; 그리고 이것이 버튼의 드롭 섀도우에 대해 제가 원하는 것입니다. box-shadow: 0 2px 5px #..

programing 2023.09.03

인라인 블록 목록 항목 사이의 공백

인라인 블록 목록 항목 사이의 공백 이 질문에는 이미 다음과 같은 답이 있습니다. 인라인/인라인 블록 요소 사이의 공간을 제거하는 방법은 무엇입니까? (41개 답변) 마감됨8년 전에. 중복 가능성: 인라인 차단 목록 항목의 원하지 않는 여백 HTML에서 "보이지 않는 공간"을 제거하는 방법 왜 그럴까요?inline-block목록 항목에 공백이 있습니까?목록 항목을 메뉴로 만드는 방법에 상관없이 항상 공백이 생깁니다. li { border: 1px solid black; display: inline-block; height: 25px; list-style-type: none; text-align: center; width: 50px; } ul { padding: 0; } One Two Three 저는 이것..

programing 2023.09.03

유연한 항목에 상위 컨테이너의 너비가 아닌 내용 너비를 사용하도록 설정

유연한 항목에 상위 컨테이너의 너비가 아닌 내용 너비를 사용하도록 설정 나는 컨테이너를 가지고 있습니다.와 함께display: flex아이가 있습니다.. 어떻게 하면 아이를 "인라인"으로 보이게 할 수 있습니까? 구체적으로 부모의 너비로 확장하지 않고 내용에 따라 자녀의 너비를 결정하려면 어떻게 해야 합니까? 제가 시도한 것: 나는 아이를 다음과 같이 설정합니다.display: inline-flex하지만 여전히 전체 너비를 차지했습니다.다른 디스플레이 속성도 모두 시도해 보았지만 효과가 없었습니다. 예: .container { background: red; height: 200px; flex-direction: column; padding: 10px; display: flex; } a { display:..

programing 2023.09.03

너비 자동과 너비의 차이 100%

너비 자동과 너비의 차이 100% 이전에 나의 가정은width: auto너비가 내용물의 너비로 설정되어 있습니다.이제는 부모의 전폭을 필요로 한다는 것을 알 수 있습니다. 이것들 사이의 차이점을 설명해 줄 수 있는 사람이 있습니까?폭 자동 div 또는 p와 같은 블록 수준 요소의 초기 너비는 auto입니다.이렇게 하면 포함 블록 내에서 사용 가능한 모든 수평 공간을 차지하도록 확장됩니다.수평 패딩 또는 테두리가 있는 경우 이러한 너비는 요소의 전체 너비에 추가되지 않습니다. 폭 100% 반면에 너비:100%를 지정하면 요소의 전체 너비는 포함 블록의 100%에 수평 여백, 패딩 및 테두리가 됩니다(박스 크기:보더 상자를 사용한 적이 없는 경우, 여백만 100%에 추가하여 전체 너비를 계산하는 방법을 변경..

programing 2023.09.03

SVG를 디브에 어떻게 집중시킬 수 있습니까?

SVG를 디브에 어떻게 집중시킬 수 있습니까? 저는 디브에서 중심을 잡으려고 하는 SVG가 있습니다.div의 너비는 900px입니다.SVG의 폭은 400px입니다.SVG의 왼쪽 여백과 오른쪽 여백이 자동으로 설정됩니다.작동하지 않고 왼쪽 여백이 0(기본값)인 것처럼 작동합니다. 뭐가 잘못됐는지 아는 사람?SVG는 기본적으로 인라인입니다. 더하다display: block그 다음에margin: auto예상대로 작동할 것입니다. 또는 레이아웃에 따라 SVG를 인라인으로 유지하고 설정할 수 있습니다.text-align: center대신 상위 요소에 있습니다. 또는 상위 요소의 플렉스 또는 그리드 레이아웃을 사용하여 SVG의 중심을 맞출 수 있습니다.위의 답변은 저에게 효과가 없었습니다.속성 추가preserveA..

programing 2023.08.24

Chrome Developer Tools의 Styles 패널의 CSS 변경 사항을 저장하는 방법은 무엇입니까?

Chrome Developer Tools의 Styles 패널의 CSS 변경 사항을 저장하는 방법은 무엇입니까? Google Chrome Developer Tools의 Styles 패널의 CSS 변경 사항을 저장하는 방법은 무엇입니까? 도구의 웹 사이트에서 리소스 패널의 모든 변경 사항을 확인할 수 있다고 합니다. 그러나 CSS 파일을 로컬에서 작업하고 있지만 리소스 패널에 변경 사항이 표시되지 않습니다. 그런데 크롬 개발자 도구의 CSS 변경 사항을 저장할 수 있는 추가 기능, 도구를 알고 있습니까?Firebug에는 많은 https://stackoverflow.com/search?q=firebug+CSS+changes+save 이 있다는 것을 알고 있습니다.Chrome Dev Tools 자체에서 CSS ..

programing 2023.08.19

텍스트 영역의 테두리 색을 변경하는 방법:focus

텍스트 영역의 테두리 색을 변경하는 방법:focus TEXT AREA의 테두리 색상을 포커스로 변경하고 싶습니다.하지만 제 코드가 제대로 작동하지 않는 것 같습니다. 코드는 바이올린에 있습니다. 여기 CSS가 있습니다. .input { border:0; padding:10px; font-size:1.3em; font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI"; color:#ccc; border:solid 1px #ccc; margin:0 0 20px; width:300px; -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 4px rg..

programing 2023.08.19

z-index가 작동하지 않는 이유는 무엇입니까?

z-index가 작동하지 않는 이유는 무엇입니까? 그래서 내가 이해한다면,z-index정확하게는, 이 상황에서 완벽할 것입니다. 아래 이미지(태그/카드)를 위의 div 아래에 배치하고 싶습니다.그래서 여러분은 날카로운 모서리를 볼 수 없습니다.이거 어떻게 하는 거지? z-index:-1 // on the image tag/card 또는 z-index:100 // on the div above 작동하지도 않습니다.이런 것들의 조합도 마찬가지입니다.왜요?속성은 다음 값을 가진 요소에서만 작동합니다.static(예:position: absolute;,position: relative;또는position: fixed). 또한 있습니다.position: sticky;파이어폭스에서 지원되며, Safari에서 접두사..

programing 2023.08.09

:before는 img 요소에서 작동하지 않습니까?

:before는 img 요소에서 작동하지 않습니까? 저는 그것을 사용하려고 합니다.:before다른 이미지 위에 이미지를 배치할 선택기를 선택하지만, 저는 단순히 이미지를 앞에 배치하는 것이 작동하지 않는다는 것을 발견했습니다.img요소, 다른 요소만 있습니다.구체적으로 제 스타일은 다음과 같습니다. .container { position: relative; display: block; } .overlay:before { content: url(images/[someimage].png); position: absolute; left:-20px; top: -20px; } 그리고 저는 이것이 잘 작동한다는 것을 알게 되었습니다. 하지만 이것은 그렇지 않습니다. 사용할 수 있습니다.div또는p그것 대신 요소s..

programing 2023.08.09
반응형