CSS: 텍스트 옆에 아이콘을 어떻게 배치하나요?

두 개의 하위 요소 text(span 요소)(i) 아이콘 - div 요소를 포함하는 이와 같은 상위 div 요소(display:flex)가 있습니다. 텍스트에 줄 바꿈 없이 한 줄만 있으면 모든 것이 잘 작동합니다. 그러나 줄 바꿈(2줄 이상)할 때 가장 넓은 줄을 기준으로 요소의 너비가 조정됩니다. 길이가 길어지면 텍스트를 줄 바꿈하고 싶습니다. 위의 예에서 (i) 아이콘을 NORTH 옆에 두기를 원합니다. (i) 아이콘을 NORTH 옆에 두고 싶습니다.

P粉668146636 2023-08-17 14:39:36 0  1  508

버튼의 나머지 부분이 아닌 아이콘을 클릭하는 것이 Javascript 구독 버튼이 작동하는 유일한 방법입니다.

rssfontAwesome 아이콘을 클릭할 때만 작동하는 구독 사용자 프로필 버튼이 있고 나머지 버튼은 작동하지 않습니다. 버튼 요소를 클릭 이벤트로 설정하기 위해 여러 가지 재정의를 시도했지만 전혀 작동하지 않습니다. 다음 코드는 아이콘 요소를 클릭할 때만 작동합니다: <buttonclass='subscribe-buttonprofile-subscribe'><?phpif($profile->userSubscribed):

P粉742550377 2024-01-16 14:13:18 0  1  486

의사 요소의 Font Awesome 5는 아이콘 대신 사각형을 표시합니다.

CSS 페이지에서 직접 FontAwesome 아이콘을 사용하여 범위의 콘텐츠를 변경하려고 하는데 작동하지 않는 것 같습니다. 1) FA<linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"integrity="sha384-5SOiIsA를 가져왔습니다.

P粉773659687 2024-01-09 22:35:19 0  2  479

js를 통해 요소를 번역하려고 하면 작동하지 않습니다.

em 클래스가 있는 모든 요소는 등급에 따라 한 번에 하나씩 표시되어야 합니다. 이모티콘 컨테이너를 아이콘만큼 크게 만들었기 때문에 오버플로가 숨겨지면 이모티콘 컨테이너 하나만 표시될 수 있습니다. 문제는 변환 속성을 수정하려고 하면 작동하지 않는다는 것입니다. conststarsEl=document.querySelectorAll(".fa-star");constratingcEl=document.querySelectorAll(".e

P粉277305212 2024-02-17 20:11:05 0  1  418

flex CSS - 래핑 대신 특정 높이 이후의 클립 요소

테두리는 정적 높이와 너비를 나타냅니다. 항목 5와 6을 두 번째 줄에 두고 그림과 같이 세 번째로 포장하는 대신 항목 3과 6을 잘라내기를 원합니다. Flex를 사용하여 어떻게 이를 달성할 수 있나요? 이 문제를 보완하기 위해 테두리와 함께 표시되는 컨테이너의 너비는 사용자 작업에 따라 크기가 조정될 수 있습니다. 넓을 때. 예를 들어, 너비가 4개 요소를 수용할 수 있을 만큼 넓으면 첫 번째 행에 4개 요소를 모두 표시하고 두 번째 행에 나머지 요소를 표시합니다. 컨테이너의 너비를 축소할 때 아래 이미지에 표시된 것처럼 최대 2...

P粉785957729 2024-04-01 14:02:02 0  1  543

Mud Blazor MudTable 열이 텍스트에 맞게 확장되지 않도록 방지하는 방법

5개의 열이 있는 테이블이 있는데 그 중 하나에는 매우 긴 사용자 ID(공백 없이)가 포함되어 있습니다. 텍스트를 잘라내는 대신 모든 내용을 수용할 수 있도록 열을 확장하고 다른 열을 오른쪽으로 밀어 스크롤 막대가 나타나게 합니다. 나는 너비를 수정하고 너비가 넘치지 않도록 하는 방법을 알아내려고 몇 시간 동안 연구해 왔습니다. MudTable 요소의 테이블 레이아웃 속성을 고정으로 설정하고 width:20%;;wrap:new;whitespace:nowrap;overflow:hide;text-overflow:el의 변형을 사용해 보...

P粉212114661 2023-12-27 11:05:27 0  1  474

js를 사용하여 회전하는 문자의 정사각형 행렬을 작성하는 방법을 알려주십시오.

두 개의 정수 M과 N이 주어지면 M*N 행렬을 생성합니다. 행렬의 요소는 A에서 Z까지의 26개 문자 중 하나의 값을 갖습니다. A는 왼쪽 상단에 있고 다른 숫자는 시계 방향으로 회전합니다. 26을 초과하면 A가 채워지기 시작합니다. 예를 들어 M=5, N=8일 때 행렬의 내용은 다음과 같습니다. A B C D E F G H V W X Y Z A

 修 2021-07-09 16:51:13 0  1  1129

Vuetify 프로젝트 목록의 적응형 그리드 레이아웃

흔해 보이는 문제에 부딪혔지만 극복할 수 있습니다. 개체 목록을 반환하는 API 쿼리가 있습니다. 내 페이지를 콘텐츠로 가득 찬 카드 그리드로 표시하고 싶습니다. 그리드에 5개의 열이 있고 행 수가 목록의 요소 수에 맞게 조정되기를 원합니다. 구현 방법을 알아낼 수 있습니다. 예: 항목[{"id":1,"title":"title1,"description":"descri를 반환하는 쿼리가 있습니다.

P粉710478990 2024-01-29 11:36:47 0  1  515

제목 변경: 고정 div 열 및 나머지 너비

모든 열이 브라우저 창의 전체 높이가 되는 5열 레이아웃을 만들려고 합니다. 중간 열을 제외한 나머지 열은 브라우저/문서 스크롤 시 고정되어 움직이지 않아야 합니다. 중간 열에는 웹 사이트 콘텐츠가 포함되고 수직으로 오버플로되므로 브라우저에서 정상적으로 스크롤되어야 합니다. 그 외에도 중간 열을 제외한 모든 열의 너비는 고정되어 있으며 나머지 공간(상위 요소의 너비 100%)을 차지하려면 중간 열이 필요합니다. 한 가지 요구 사항은 flexbox 또는 css-grid를 사용하지 않는 것입니다. 아래 코드는 내가 얻은 것입니다. 열 ...

P粉786432579 2023-09-14 17:17:47 0  1  670

제목: ID별로 최신 하위 요소를 제거하는 JavaScript는 효과가 제한적입니다.

사용자가 버튼을 클릭하여 입력을 제거할 수 있는 동적 목록을 만들고 있습니다. 새 입력이 생성되면 새 입력이 생성될 때마다 1씩 증가하는 카운터를 사용하여 하위 요소에 ID를 할당합니다. 그런데 ID별로 입력을 삭제하려고 하면 가장 최근에 생성된 입력만 삭제 가능한 것 같습니다. 5개의 새 입력을 생성한 다음 input:2에서 삭제 버튼을 클릭하면 5번째 입력과 버튼이 삭제되는 것으로 나타났습니다. 따라서 프로세스 초기에 입력 및 버튼 ID를 설정하더라도 삭제 버튼을 클릭하면 행 카운터의 현재 값에만 의존합니다. 누가 나한테 줄 수...

P粉914731066 2024-01-16 18:06:37 0  2  538

전체 페이지를 이동하지 않고 특정 섹션을 대상으로 하는 페이지 내에서 세로 스크롤 구현

일부 페이지에서 이런 효과를 본 적이 있습니다. 아래로 스크롤했지만 페이지 자체가 움직이지 않는 것 같습니다. 따라서 일부 요소는 페이드 인 또는 아웃되거나 나타나거나 사라집니다. 5장의 카드가 포함된 섹션이 있습니다. 이제 동일한 효과를 만들고 싶습니다. 섹션까지 아래로 스크롤할 때 위아래로 스크롤하여 섹션을 탐색하고 싶습니다. 현재 위치에 따라 카드를 표시하거나 숨기고 싶습니다. 먼저 해당 섹션에 Overflow:scroll을 추가했지만 이 효과를 만들 아이디어가 부족했습니다.

P粉946437474 2023-08-15 19:29:46 0  1  442

문제 2003(HY000) 해결 방법: MySQL 서버 'db_mysql:3306'에 연결할 수 없습니다(111).

최근에 FastAPIPython 서버를 컨테이너화하려고 했습니다(복제/배가 목적으로도). 이전에는 Docker 컨테이너에 MySQL 서버만 있으면 모든 것이 괜찮았지만 웹 서버도 서비스로 만들었을 때 MySQL 서버에 연결할 수 없어 이제는 애플리케이션이 작동하지 않습니다. 다음은 fromfastapiimportFastAPIimportmysql.connectorapp 애플리케이션에 있는 서버 데이터베이스 초기화 커넥터의 코드 조각입니다.

P粉178132828 2023-09-05 11:18:47 0  1  894

쿼리 제한 후 정렬 실험

이것이 나의 첫 번째 질문입니다. 문제가 있으면 용서해 주십시오. 제약 조건을 기반으로 정렬 쿼리를 만들려고 합니다. 따라서 90개의 레코드가 있는 Customers 테이블이 있습니다. 먼저 3개의 레코드로 제한된 쿼리를 수행한 다음 ContactName이라는 열을 기준으로 이 쿼리의 결과를 정렬하려고 합니다. 내 생각에 이것은 중첩된 쿼리일 수 있습니다. 중첩 쿼리는 SQLServer에서 잘 실행되지만 MySQL에서 구현하는 방법을 모릅니다. 제한 쿼리: Select*fromcustomerslimit

P粉237125700 2023-09-05 14:46:42 0  1  778

CSS 그리드: 하위 콘텐츠가 열 너비를 초과할 때 새 행 생성

CSS 그리드를 기반으로 하는 두 개의 열 레이아웃이 있습니다. 두 번째 열의 내용이 1fr을 초과하면 새 행을 만들고 싶습니다. 현재로서는 내용이 단순히 열을 넘치게 됩니다. 이 레이아웃의 요구 사항 중 하나는 오른쪽 메뉴 열의 항목이 한 행에 있어야 한다는 것입니다. .right-menu{...grid-auto-flow:columndense;...}를 사용하여 이를 달성합니다. Grid-auto-flow 속성을 제거하면 오버플로가 중지됩니다. 그러나 항목이 이제 여러 행으로 쌓여 있어 내가 원하는 것이 아닙니다. .ri 변환도 ...

P粉212114661 2023-09-05 15:18:28 0  1  655

AND, OR 및 NOT 연산자를 사용한 PHP 전체 텍스트 검색 기능

초보자 질문: PHP와 eloquent를 사용하여 검색 문자열에 대한 전체 텍스트 검색을 구현하려고 합니다. $searchstring="+(피해자)+범죄-covid";$searchresult=RssItem::whereRaw("MATCH(description)AGAINST('$searchstring'INBOOLEANMODE)")->ge

P粉076987386 2023-09-05 15:06:32 0  1  626

모든 PHP 유형을 문자열로 변환하는 가장 짧은 방법

나는 언젠가 의학과 같은 분야에 적용될 수 있기를 바라는 일반 시스템(즉, "과학적")을 작성하고 있습니다. 내 생각에 가장 좋은 방법은 PHP의 모든 데이터를 문자열로 표현하는 것입니다(true는 "true", false는 "false" 등). 그 이유는 PHP에서 모든 값은 고유한 문자열 표현(예: PHP 코드 자체)을 갖기 때문입니다. 이 프로그램의 설계 속도를 높이기 위해 이 질문을 게시합니다. 숫자, 부울 등 일부 값은 쉽게 문자열로 변환됩니다. 개체, 배열, 리소스 등...

P粉369196603 2023-09-05 15:34:44 0  1  1047

다른 열을 기준으로 그룹화하면서 MySQL에서 DATETIME 열의 평균을 얻는 방법

다음 쿼리를 사용하여 MySQL 테이블을 생성하고 채우고 있습니다. SETtime_zone='+00:00';CREATETABLEtimestamp_n_datetime(idINT,timeDATETIME,avg_timeDATETIME);INSERTINTOtimestamp_n_datetime(id,time,avg_time)VALUES("1","2023-01 -0310:

P粉460377540 2023-09-05 11:46:21 0  1  532

다중 장치(휴대폰) 동기화 - React Native

모든 사용자의 모바일 장치에서 동시에 실행되는 Lightshow를 만들려고 합니다(최대 2000-3000명의 사용자가 있을 수 있음). 모든 사용자는 인터넷(Wi-Fi 또는 모바일 데이터)을 사용합니다. FE에서는 구독을 위해 Apollo를 사용하는데 이는 정말 매력적입니다. 하지만 문제는 사용자 A가 사용자 B보다 더 빨리 구독 이벤트를 얻을 수 있다는 것입니다. 이는 사용자 A가 사용자 B보다 먼저 게임을 시작한다는 것을 의미합니다. 이는 우리가 라이트쇼 아키텍처를 사용하고 사용자가 더 일찍 또는 나중에 시작할 수 없기 때문에 ...

P粉151466081 2023-09-05 11:58:38 0  1  726