CSS: テキストの横にアイコンを配置するにはどうすればよいですか?

このような親 div 要素 (display:flex) があり、テキスト - スパン要素 (i) アイコン - div 要素の 2 つの子要素が含まれています。テキストが 1 行のみ (折り返しなし) の場合は、すべて正常に機能します。ただし、折り返す場合（2行以上）、要素の幅は最も太い行に基づいて調整されるため、長さが長い場合はテキストを折り返すようにしたいと考えています。上の例では、(i) アイコンを NORTH の隣に置きたいと思います。 (i)のアイコンをNORTHの横に置きたいです。

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

アイコンをクリックすること (ボタンの残りの部分はクリックしないこと) が、JavaScript の購読ボタンが機能する唯一の方法です。

ユーザー プロファイルを購読するボタンがありますが、これは rssfontAwesome アイコンをクリックした場合にのみ機能し、ボタンの残りの部分は機能しません。ボタン要素をクリックイベントとして設定するためにいくつかのオーバーライドを試しましたが、まったく機能しません。次のコードは、アイコン要素がクリックされた場合にのみ機能します: <buttonclass='subscribe-buttonprofile-subscribe'><?phpif($profile->userSubscribed):

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

擬似要素の Font Awesome 5 がアイコンではなく四角形を表示する

FontAwesome アイコンを含むスパンのコンテンツを CSS ページから直接変更しようとしていますが、機能するように見えません。 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 クラスを持つすべての要素は、評価に基づいて一度に 1 つずつ表示する必要があります。絵文字コンテナをアイコンと同じ大きさにしたので、オーバーフローを非表示にすると、絵文字コンテナは 1 つだけ表示されます。問題は、変換プロパティを変更しようとしても機能しないことです。 conststarsEl=document.querySelectorAll(".fa-star");constratingcEl=document.querySelectorAll(".e

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

flex css - 折り返すのではなく、特定の高さの後の要素をクリップします

境界線は静的な高さと幅を表します。図のように 3 回折り返すのではなく、項目 5 と 6 を 2 行目に残し、項目 3 と 6 を切り取りたいと思います。 Flex でこれを実現するにはどうすればよいですか?この問題を補うために、コンテナー (境界線で表示される) の幅をユーザーのアクションによってサイズ変更できます。広いときは。たとえば、4 つの要素を保持できる幅がある場合、4 つの要素すべてが 1 行目に表示され、残りの要素が 2 行目に表示されます。コンテナーの幅を折りたたむときは、以下の画像に示すように最大 2 行になるようにします。結果を次のようにしたいので、

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

Mud Blazor MudTable の列がテキストに合わせて拡大されないようにする方法

5 つの列を持つテーブルがあり、そのうちの 1 つに非常に長いユーザー ID (スペースなし) が含まれています。テキストを切り取るのではなく、すべてのコンテンツが収まるように列を拡張し、他の列を右に押してスクロールバーを表示させます。幅を固定してオーバーフローを防ぐ方法を見つけるために、私は何時間も研究してきました。 MudTable 要素の table-layout 属性を固定に設定して、width:20%;;wrap:new;whitespace:nowrap;overflow:hide;text-overflow:el のバリエーションを使用してみました。

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

jsを使って文字の回転正方行列を書く方法を教えてください

2 つの整数 M と N を与えて、M*N 行列を生成します。行列の要素は、A から Z までの 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 つの列があり、行の数がリスト内の要素の数に適応するようにしたいと考えています。実装方法はわかります。例: items[{"id":1,"title":"title1,"description":"descri] を返すクエリがあります。

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

タイトル変更: div 列と残りの幅を修正

すべての列がブラウザウィンドウの高さ全体になる、5 列のレイアウトを作成しようとしています。中央の列を除いて、他の列は固定され、ブラウザ/ドキュメントがスクロールされたときに移動しないようにする必要があります。中央の列には Web サイトのコンテンツが含まれており、垂直方向にオーバーフローするため、ブラウザーでは通常どおりスクロールする必要があります。それとは別に、中央の列を除くすべての列は固定幅を持っており、中央の列が残りのスペース（親要素の100％の幅）を占める必要があります。要件の1つは、フレックスボックスまたはCSSグリッドを使用しないことです。以下のコードは私が得たものです。列「c」...

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  536

ページ全体を移動せずに、特定のセクションをターゲットとするページ内での垂直スクロールを実装します。

いくつかのページでこの効果を見たことがあります。下にスクロールしても、ページ自体は動いていないように見えます。したがって、一部の要素はフェードインまたはフェードアウト、表示または非表示になります。 5枚のカードを含むセクションがあります。次に、同じ効果を作成したいと思います。セクションまで下にスクロールするときに、上下にスクロールしてセクションを移動したいと考えています。現在いる場所に応じて、カードを表示または非表示にしたいと考えています。まずはそのセクションに overflow:scroll を追加しましたが、このエフェクトを作成するためのアイデアが枯渇してしまいました。

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

問題 2003 (HY000) を修正する方法: MySQL サーバー 'db_mysql:3306' に接続できません (111)

最近、FastAPIPython サーバーをコンテナ化しようとしました (レプリケーション/二重化の目的でもあります)。以前は、Docker コンテナーに MySQL サーバーだけを入れてすべて問題なかったのですが、Web サーバーもサービスにしたところ、MySQL サーバーに接続できなくなり、アプリケーションが動作しなくなりました。以下は、アプリケーション fromfastapiimportFastAPIimportmysql.connectorapp のサーバー データベース初期化コネクタのコード スニペットです。

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

クエリ制限後のソートを試してみる

それで、これが私の最初の質問です、何か間違っている場合はご容赦ください。制約に基づいて並べ替えクエリを作成しようとしています。つまり、90 個のレコードを持つ Customers テーブルがあります。まず 3 レコードに制限されたクエリを実行し、次にこのクエリの結果を ContactName という列で並べ替えたいと考えています。これはネストされたクエリである可能性があると思います。ネストされたクエリは SQLServer では正常に実行されますが、MySQL で実装する方法がわかりません。制限クエリ: Select*fromcustomerslimit

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

CSS グリッド: 子コンテンツが列幅をオーバーフローした場合に新しい行を作成する

CSS グリッドに基づいた 2 列のレイアウトがあります。 2列目の内容が1frを超えた場合、新しい行を作成したいと思います。現状では、コンテンツが単に列から溢れてしまいます。このレイアウトの要件の 1 つは、右側のメニュー列の項目が 1 行にあることです。これを次のように実行します。 .right-menu{...grid-auto-flow:columndense;...} Grid-auto-flow 属性を削除すると、オーバーフローが停止します。ただし、アイテムは複数の行に積み重ねられており、これは私が望むものではありません。 .riも変換してみました

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

AND、OR、NOT 演算子を使用した PHP 全文検索機能

初心者の質問: php と eloquent を使用して、検索文字列の全文検索を実装しようとしています。 $searchstring="+(被害者容疑者)+crime-covid";$searchresult=RssItem::whereRaw("MATCH(description)AGAINST('$searchstring'INBOOLEANMODE)")->ge

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

すべての PHP 型を文字列に変換する最短の方法

私は、いつか医療などの分野 (つまり「科学的」) に適用できることを願っている一般的なシステムを書いています。最良の方法は、php 内のすべてのデータを文字列で表すことだと思います (true は「true」、false は「false」など)。その理由は、php ではすべての値が一意の文字列表現 (php コード自体など) を持つためです。このプログラムの設計プロセスをスピードアップするために、この質問を投稿しました。数値やブール値など、一部の値は簡単に文字列に変換できます。オブジェクト、配列、リソースなど、簡単ではないものもあります。譲渡対象だと思いますが、

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

他の列でグループ化しながら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

すべてのユーザーのモバイル デバイスで同時に起動するライトショーを作成しようとしています (最大 2000 ～ 3000 人のユーザーが参加可能)。すべてのユーザーはインターネット (Wi-Fi またはモバイル データ) を使用します。私たちの FE では、サブスクリプションに Apollo を使用していますが、それは魅力的に機能します。しかし問題は、ユーザー A がユーザー B よりも早くサブスクライブされたイベントを取得できることです。これは、ユーザー A がユーザー B よりも早くゲームのプレイを開始することを意味します。ライトショー アーキテクチャがあり、ユーザーは早くも遅くも開始でき...

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