반응형

CSS 18

HTML 테이블의 내용 중심을 맞추는 방법은?

HTML 테이블의 내용 중심을 맞추는 방법은? HTML을 사용하고 있습니다.그리고 나는 텍스트를 정렬하고 싶습니다.각 감방의 중심으로. 텍스트를 가로와 세로로 정렬하려면 어떻게 해야 합니까?여기 CSS와 인라인을 사용한 예가 있습니다.style속성: td { height: 50px; width: 50px; } #cssTable td { text-align: center; vertical-align: middle; } Text Text Text Text http://jsfiddle.net/j2h3xo9k/ 편집: 더valignHTML5에서 attribute가 더 이상 사용되지 않으므로 사용하지 마십시오.CSS는 당신의 가운데 텍스트에td요소들은 td { text-align: center; vertical-..

programing 2023.10.29

플렉스박스 : 1열 4개

플렉스박스 : 1열 4개 플렉스 박스를 사용하여 페이지와 함께 동적으로 크기가 조정되는 8개의 항목을 표시하고 있습니다.항목을 두 줄로 나누도록 강제하려면 어떻게 해야 합니까? (한 줄에 4개) 다음은 관련 저격입니다. (또는 jsfiddle을 원하신다면 - http://jsfiddle.net/vivmaha/oq6prk1p/2/) .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: wrap; margin: -10px 0 0 -10px; } .child { display: inline-block; background: blue; margin:..

programing 2023.10.29

HTML/CSS에서 이미지의 일부만 표시하려면 어떻게 해야 합니까?

HTML/CSS에서 이미지의 일부만 표시하려면 어떻게 해야 합니까? HTML로 250x250px 이미지의 중앙 50x50px만 표시하는 방법을 원한다고 하자 어떻게 해야 하나요?또한 css:url() 참조에 대해 이를 수행할 수 있는 방법이 있습니까? CSS에서 클립에 대해 알고 있지만 절대 위치 지정과 함께 사용할 때만 작동하는 것 같습니다.질문에서 언급한 것처럼 css 속성이 있지만 클리핑되는 요소는 다음과 같습니다.position: absolute;(아쉽다): .container { position: relative; } #clip { position: absolute; clip: rect(0, 100px, 200px, 0); /* clip: shape(top, right, bottom, left)..

programing 2023.10.24

영어 알파벳의 어떤 글자가 픽셀을 가장 많이 차지합니까?

영어 알파벳의 어떤 글자가 픽셀을 가장 많이 차지합니까? 문 닫았습니다.이 질문은 필요합니다.세부 사항이나 명확성.현재 답변을 받지 않고 있습니다. 이 질문을 개선하고 싶으십니까?이 게시물을 편집하여 세부사항을 추가하고 문제를 명확히 합니다. 2년 전에 문을 닫았습니다. 이 질문을 개선합니다. 문장의 글자 수에 따라 동적인 프로그래밍을 하려고 합니다.화면에서 가장 많은 픽셀을 차지하는 영어 알파벳의 어떤 글자가 있습니까?음, 어디 보자구요: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. 삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐. cccccccccccccccccccccccccccccccccccccccccccccc dddddddddddddd..

programing 2023.10.24

텍스트 노드에 대한 CSS 셀렉터가 있습니까?

텍스트 노드에 대한 CSS 셀렉터가 있습니까? 제가 하고 싶은 일은 (IE에는 없음) 다음과 같습니다. p:not(.list):last-child + :text { margin-bottom: 10px; } 텍스트 노드에 여유를 줄 수 있습니다.(그게 가능하긴 합니까?)CSS로 텍스트 노드를 얻는 방법은 무엇입니까?텍스트 노드에는 여백이나 다른 스타일이 적용될 수 없으므로, 적용할 스타일이 필요한 모든 스타일이 요소에 있어야 합니다.요소 안에 있는 텍스트의 일부를 다른 스타일로 만들고 싶다면 a로 포장합니다.span아니면div,예를들면.CSS로 텍스트 노드를 대상으로 할 수 없습니다.난 당신과 함께 있어요, 당신이...하지만 당신은 할 수 없습니다 :( 텍스트 노드를 a로 감싸지 않으면 @Jacob이 제안..

programing 2023.09.19

overflow-x:숨김으로 모바일 브라우저에서 콘텐츠가 넘쳐나는 것을 방지하지 못합니다.

overflow-x:숨김으로 모바일 브라우저에서 콘텐츠가 넘쳐나는 것을 방지하지 못합니다. 여기에 웹사이트가 있습니다. 에서 볼 때 은 창됩니다.body가지다overflow-x:hidden. Android든 iOS든 모든 모바일 브라우저에서 검은색 메뉴 모음은 페이지 오른쪽에 공백을 제공하는 전체 너비를 표시합니다.내가 알 수 있는 한, 이 하얀 공간은 심지어 그 일부도 아닙니다.html아니면body꼬리표를 붙이기 에서 특정 : 사이트가 1100px로 확장되지만 1100을 넘는 공백이 여전히 있습니다. 제가 무엇을 빠뜨리고 있나요?뷰포트를 1100으로 유지하고 오버플로를 차단하려면 어떻게 해야 합니까?에 를 를 안에 사이트 래퍼 div 만들기를 하는 것.overflow-x:hidden대신 포장지로아니면문..

programing 2023.09.14

HTML5 범위 입력을 슬라이더 전후로 다른 색상으로 스타일화하는 방법은?

HTML5 범위 입력을 슬라이더 전후로 다른 색상으로 스타일화하는 방법은? 저는 왼쪽은 초록색, 오른쪽은 회색을 원합니다.위의 그림과 같이 완벽할 것입니다. 가급적 순수한 CSS 솔루션(웹킷만 걱정하면 됨). 그런 일이 가능한가요?순수 CSS 솔루션: Chrome: 오버플로를 숨깁니다.input[range]색으로 채웁니다., 에 을 로 로 . IE: 휠을 재창조할 필요가 없습니다.::-ms-fill-lower Firefox는 휠을 재창조할 필요가 없습니다.::-moz-range-progress /*Chrome*/ @media screen and (-webkit-min-device-pixel-ratio:0) { input[type='range'] { overflow: hidden; width: 80px; ..

programing 2023.09.09

짝수와 홀수 요소를 어떻게 스타일링 할 수 있습니까?

짝수와 홀수 요소를 어떻게 스타일링 할 수 있습니까? CSS 유사 클래스를 사용하여 목록 항목의 짝수 및 홀수 인스턴스를 선택할 수 있습니까? 다음과 같이 대체 색상 목록이 생성될 것으로 예상되지만 대신 파란색 항목 목록이 표시됩니다. ho ho ho ho ho 데모: http://jsfiddle.net/thirtydot/K3TuN/1323/ li { color: black; } li:nth-child(odd) { color: #777; } li:nth-child(even) { color: blue; } ho ho ho ho ho 설명서: https://developer.mozilla.org/en-US/docs/Web/CSS/ : n번째 자녀 http://caniuse.com/css-sel3 (거의 모든..

programing 2023.09.04

Twitter 부트스트랩 툴팁에 여러 줄이 포함되도록 만드는 방법은 무엇입니까?

Twitter 부트스트랩 툴팁에 여러 줄이 포함되도록 만드는 방법은 무엇입니까? 저는 현재 Bootstrap의 툴팁 플러그인을 사용하여 표시할 텍스트를 만들기 위해 아래 기능을 사용하고 있습니다.여러 줄의 툴팁이 다음과 같이 작동하는 이유가 무엇입니까? 그리고 아닌\n링크의 제목 속성에 HTML이 없는 것을 선호합니다. 효과가 있는 것 def tooltip(object) tooltip = "" object.each do |user| tooltip += "#{user.identifier}" + " " end return tooltip end 내가 원하는 것 def tooltip(object) tooltip = "" object.each do |user| tooltip += "#{user.identifier..

programing 2023.08.30

하위 요소의 여백이 상위 요소를 이동합니다.

하위 요소의 여백이 상위 요소를 이동합니다. 나는 있습니다div(부모) 다른 것을 포함하는div(아이).상위 요소는 다음의 첫 번째 요소입니다.body특별한 CSS 스타일 없이.가 정할때설설을 설정할 때. .child { margin-top: 10px; } 최종 결과는 아이의 윗면이 여전히 부모님과 일치한다는 것입니다.우리 부모님은 아이가 10펜스 아래로 이동하는 대신에 10펜스 아래로 이동합니다. 나의DOCTYPE으로 설정됨XHTML Transitional. 내가 여기서 뭘 놓쳤지요? 1집1편 우리 부모님은 위에서 아래로 (픽셀 완벽) 표시되어야 하는 배경을 가지고 있기 때문에 엄격하게 정의된 치수를 가질 필요가 있습니다.따라서 수직 여백을 설정하는 것은 불가능합니다. 2집2편 이 동작은 FF, IE ..

programing 2023.08.25
반응형