CSS を使用して同じ親タグの左側と右側に 2 つのボタンを配置する方法

CSS を使用して同じ親タグの左側と右側に 2 つのボタンを配置する方法

この記事では、主に同じ親タグの左側と右側にある 2 つのボタンの CSS レイアウト方法を紹介し、皆さんと共有します。詳細は次のとおりです。

レンダリング

レイアウトコード

<view class="grace-footer" style="width:100%;" slot="gFooter">
 <view style="float:right;width:50%">
    <button type="primary" style="line-height: 85rpx; margin: 25rpx; " @click="saveService(scanKay,tableList)">送信</button> 
 </ビュー>
 <view style="float:left;width:50%">
  <button type="warn" style="line-height: 85rpx; margin: 25rpx;" @click="removeService()">リセット</button>
 </ビュー>
   
</ビュー>

style="float:right;width:50%"
親ラベルコンテナの右側にあり、幅の50%を占めます。

style="float:left;width:50%"
親ラベルコンテナの左側にあり、幅の50%を占めます。

grace-footerはGraceUIによって導入されたCSSコードです。その効果は下部ナビゲーションです

.grace-footer{
     位置:固定; 
     zインデックス:2; 左:0; 
     下:0; 
     背景:#FFFFFF; 
     幅:750rpx; 
     オーバーフロー:非表示; 
     ボックスの影:1px 1px 6px #888;
}

同じ親タグの左右にボタンを2つ配置するCSSレイアウト方法についての記事はこれで終わりです。同じ親タグの左右にボタンを2つ配置するCSSの関連記事については、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  無効と読み取り専用で入力を読み取り専用に設定する

>>:  Vue 3 での watch と watchEffect の新しい使い方

推薦する

CSS3 でクールなスライス画像カルーセル効果を実現

今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...

ウィンドウ内のさまざまな距離/スクロール距離の正確な計算の概要

通常、プロジェクト開発では、マージン、位置、座標などを扱う必要があります。悲劇なのは、これらの概念が...

JS を使用してデータ型を決定する 4 つの方法

目次序文1. 型2. インスタンス3. コンストラクター詳細: 4. 文字列要約する序文Javasc...

Mysqlはブール型の演算を設定します

Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...

ウィンドウ表示効果を実現するJavaScript

この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

アイデアのパッケージ化とクラウドサービスへのアップロードにおけるプロジェクトプロセスの分析

1つ。まず、アイデアとしてパッケージ化する必要があります。私はSpringbootフレームワークプロ...

Ubuntu 14.04 に FTP サーバーをインストールするための実装手順

目次インストールソフトウェア管理匿名アクセスモード設定ファイルを変更するクライアントがサーバーにログ...

ReactでCSSスタイルを動的に変更する2つの方法の詳細な説明

最初の方法: デモとしてボタンをクリックしてテキストを表示または非表示にするクラスを動的に追加します...

MySQL がデフォルトの分離レベルとして繰り返し読み取りを選択する理由

目次Oracle 分離​​レベルMySQL 分離レベル要約する多くの読者は、MySQL のトランザク...

HTML文書の基本構造(Webページ作成の基礎知識)

HTMLの動作原理: 1. ローカル操作: ブラウザでhtmlファイルを開く2. リモートアクセス...

Oracle と MySQL の高可用性ソリューションの比較分析

Oracle と MySQL の高可用性ソリューションについては、以前からまとめたいと思っていたので...

Navicat を仮想マシン MySQL に接続する際によくあるエラーと解決策

質問1 解決するサービスを開始します: service mysqld start; /sbin/ip...

Winows Server 2019 アクティベーション コードとボリューム ライセンス エディション KMS インストール キー GVLK

最近、社内文書の整理とファイルサーバーの構成を予定しています。以前はサーバー2003を使い慣れていま...

JavaScript のショートカットのヒント

目次1. 配列を結合する2. 配列をマージする(最初に) 3. 配列の複製4. 構造化分解割り当て5...

現在使用されている設定ファイル my.cnf を表示する mysql メソッド (推奨)

my.cnfは、MySQL の起動時に読み込まれる設定ファイルです。通常は MySQL インストー...