반응형

CSS 11

컨테이너의 나머지 너비를 채우는 스타일 입력 요소

컨테이너의 나머지 너비를 채우는 스타일 입력 요소 내게 다음과 같은 html 스니펫이 있다고 가정해 보겠습니다. label text 이것은 제 정확한 코드는 아니지만, 중요한 것은 고정 폭 컨테이너에 같은 라인에 라벨과 텍스트 입력이 있다는 것입니다.포장하지 않고 라벨의 크기도 모른 채 용기의 남은 폭을 채우도록 입력을 스타일화하려면 어떻게 해야 합니까?자바스크립트나 테이블 레이아웃 해킹을 사용하지 않고 간편하고 깨끗한 솔루션이 있습니다.이것은 다음과 같은 답변과 유사합니다.다른 요소가 떠있는 상태에서 입력 텍스트 자동 너비 100% 채우기 입력 필드를 다음과 같은 스팬으로 감싸는 것이 중요합니다.display:block. 다음으로 버튼이 먼저이고 입력 필드가 두 번째여야 합니다. 그러면 버튼을 오른쪽으..

source 2023.10.29

Chrome에서 인쇄할 때 href 값을 제거해야 함

Chrome에서 인쇄할 때 href 값을 제거해야 함 인쇄 CSS를 커스터마이징하려고 하는데, 그 CSS가 링크를 출력한다는 것을 발견했습니다.href링크뿐만 아니라 가치도 있습니다. 크롬에 있습니다. 다음 HTML의 경우: Google 인쇄: Google (http://www.google.com) 그리고 인쇄를 원합니다. Google 부트스트랩은 아래 선택한 답변과 동일한 작업을 수행합니다. @media print { a[href]:after { content: " (" attr(href) ")"; } } 여기서 제거하거나 인쇄 스타일시트에서 덮어쓰기만 하면 됩니다. @media print { a[href]:after { content: none !important; } } 그렇지 않아요.인쇄 스타일시..

source 2023.09.09

마우스가 테이블의 행 위에 이동할 때 커서를 손으로 변경

마우스가 테이블의 행 위에 이동할 때 커서를 손으로 변경 마우스를 사용할 때 커서 포인터를 손으로 변경하려면 어떻게 합니까?순식간에 NameAge Jennifer24 Kate36 David25 Mark40 CSS를 사용하면 실제로 이를 수행할 수 있습니다. .sortable tr { cursor: pointer; } 부트스트랩 스타일을 조금 검색해보니 다음과 같습니다. [role=button]{cursor:pointer} 따라서 다음과 같이 원하는 것을 얻을 수 있습니다. hi 내가 찾은 가장 쉬운 방법은 추가하는 것입니다. style="cursor: pointer;" 당신의 태그에.더하다cursor: pointer당신의 CSS에.나는 이것을 나의 것에 추가했습니다.style.css커서 옵션 관리하기 ...

source 2023.09.04

전체 화면을 채우시겠습니까?

전체 화면을 채우시겠습니까? 다음과 같이 방사형 그라데이션을 웹 페이지의 배경으로 사용하고 있습니다. background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000)); 작동하지만 내용이 전체 페이지를 채우지 않으면 그라데이션이 끊어집니다.어떻게 만들 수 있습니까?요소가 페이지 전체를 채웁니다, 항상?html, body { margin: 0; height: 100%; } 우리 사이트에는 콘텐츠가 정적인 페이지와 AJAX로 로드되는 페이지가 있습니다.한 페이지(검색 페이지)에서 AJAX 결과가 페이지를 가득 채우는 경우와 결과를 반환하지 않는 경우가 있었습니다.모든 경우에 배경 이미지가 페이지를 채우려면 ..

source 2023.08.30

배경 이미지 위의 반투명 컬러 레이어?

배경 이미지 위의 반투명 컬러 레이어? 저는 DIV가 있는데 배경으로 패턴을 넣고 싶습니다.이 패턴은 회색입니다.그래서 조금 더 멋지게 만들기 위해, 저는 옅은 투명한 색상의 "레이어"를 덧씌우고 싶습니다.아래는 제가 시도했지만 효과가 없었던 것입니다.배경 이미지 위에 컬러 레이어를 씌우는 방법이 있습니까? 여기 제 CSS가 있습니다. background: url('../img/bg/diagonalnoise.png'); background-color: rgba(248, 247, 216, 0.7); 이것이 정말 오래된 스레드라는 것을 알지만, 구글의 맨 위에 표시됩니다. 그래서 여기 다른 옵션이 있습니다. 이것은 순수한 CSS이며, 별도의 HTML이 필요하지 않습니다. box-shadow: inset 0 ..

source 2023.08.30

단일 셀이 아닌 테이블 셀의 열에서 줄 바꿈을 방지하는 방법은 무엇입니까?

단일 셀이 아닌 테이블 셀의 열에서 줄 바꿈을 방지하는 방법은 무엇입니까? 단일 셀이 아닌 테이블 열에서 자동 줄 바꿈을 방지하려면 어떻게 해야 합니까?CSS 스타일의 공백을 사용할 수 있습니다. white-space: nowrap; 완료를 위해: #table_id td:nth-child(2) {white-space: nowrap;} 의 2열에 스타일을 적용하는 데 사용됩니다.the table_id테이블. 이것은 모든 주요 브라우저에서 지원됩니다. IE는 IE9 이후부터 이를 지원하기 시작했습니다.그냥 추가 style="white-space:nowrap;" 예: My name is good nowrap 스타일을 사용합니다. ... CSS야!이를 위한 몇 가지 방법이 있습니다. 그 중 어느 것도 쉽고 명백..

source 2023.08.25

CSS 미디어 쿼리를 사용하여 장치 방향을 탐지하는 방법은 무엇입니까?

CSS 미디어 쿼리를 사용하여 장치 방향을 탐지하는 방법은 무엇입니까? JavaScript에서 방향 모드는 다음을 사용하여 감지할 수 있습니다. if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } 그러나 CSS만을 사용하여 방향을 감지하는 방법이 있습니까? 예: @media only screen and (width > height) { ... } 화면 방향을 감지하는 CSS: @media screen and (orientation:portrait) { … } @media screen and (orientation:landscape) { … } 미디어 쿼리의 CSS 정의는 http://www.w..

source 2023.08.20

버튼을 오른쪽으로 정렬합니다.

버튼을 오른쪽으로 정렬합니다. 이 코드를 사용하여 단추를 오른쪽 정렬합니다. 그렇지만태그는 약간의 공간을 낭비하므로 동일한 작업을 수행하려고 합니다.또는.사용하는 얼라인먼트 기법은 사용자의 상황에 따라 다르지만 기본적인 것은float: right;: 하지만 당신은 아마도 당신의 플로트를 청소하고 싶을 것이지만 그것은 가능합니다.overflow:hidden상위 컨테이너 또는 명시적 컨테이너에용기 바닥에 예: http://jsfiddle.net/ambiguous/8UvVg/ 플로팅 요소는 일반적인 문서 흐름에서 제거되어 부모의 경계를 넘치게 하고 부모의 높이를 엉망으로 만들 수 있으며 CSS는 이를 처리합니다.overflow:hidden. 추가한 JSFidle 예제를 사용하여 부동 및 지우기가 어떻게 동작하..

source 2023.08.20

div 내에서 이미지를 가운데와 가운데에 정렬

div 내에서 이미지를 가운데와 가운데에 정렬 나는 다음 디브이를 가지고 있습니다. 이 방법이 더 간단합니다. #over > img{ display: block; margin:0 auto; } 음, 우리는 2016년에...플렉스박스를 사용하면 어떨까요?반응성도 좋습니다.즐거운 시간 되세요. #over{ display:flex; align-items:center; justify-content:center; } 심플. 2018년.FlexBox.브라우저 지원을 확인하려면 - 사용할 수 있습니까? 최소 솔루션: div#over { display: flex; justify-content: center; align-items: center; } 가능한 한 광범위한 브라우저 지원을 받으려면 다음을 수행합니다. div..

source 2023.08.10

CSS에서 스타일 집합을 선언할 때 "."와 "#"의 차이점은 무엇입니까?

CSS에서 스타일 집합을 선언할 때 "."와 "#"의 차이점은 무엇입니까? 이 질문에는 이미 다음과 같은 답이 있습니다. id와 클래스의 차이점은 무엇입니까? (17개 답변) 마감됨1년 전에. 사이의 차이점은 무엇입니까?#그리고..요소에 대한 스타일 집합을 선언할 때 그리고 어떤 것을 사용할지 결정할 때 실행되는 의미론은 무엇입니까?네, 그들은 다릅니다... #는 고유한 ID를 가진 단일 특정 요소를 대상으로 하는 데 사용되는 ID 선택기이지만 . 는 특정 클래스를 가진 여러 요소를 대상으로 하는 데 사용되는 클래스 선택기입니다.다른 말로 하자면: #foo {}속성으로 선언된 단일 요소 스타일 지정id="foo" .foo {}속성을 가진 모든 요소 스타일 지정class="foo"요소에 여러 클래스를 할당..

source 2023.07.31
반응형