margin-left: auto;使元素靠右

在這里插入圖片描述
摘要:

今天寫樣式遇到一個東西,就是需要表單居右顯示的,但是作用了彈性布局,其他的都不行的,一開始使用了浮動,但是使用了浮動后盒子就不繼承父盒子的寬度了,移動端還行,自動回到100%狀態,但是pc端寬屏的時候就被吃掉了一截!

在這里插入圖片描述

解決方案:

@media (min-width: 1400px){#account-login .login-item-fl {margin-left: auto;margin-right: 0;}
}

理解:

The following constraints must hold among the used values of the other properties:
‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ +‘border-right-width’ + ‘margin-right’ = width of containing block

也就是在上述等式中,只有你設置的margin-left: auto,那么margin-left將會被設置為滿足上述等式,而等式的右邊是容器盒子寬度,等式中的其它值(除過width)都為0,因此

margin-left = width of containing block - width(div)

margin: auto 水平居中的原理:

If both 'margin-left' and 'margin-right' are 'auto', 
their used values are equal. 
This horizontally centers the element with respect to the edges of the containing block.

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/18624.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/18624.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/18624.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

被追著問UUID和自增ID做主鍵哪個好,為什么?

之前無意間看到群友討論到用什么做主鍵比較好 其實 UUID 和自增主鍵 ID 是常用于數據庫主鍵的兩種方式,各自具有獨特的優缺點。 UUID UUID 是一個由 128 位組成的唯一標識符,通常以字符串形式表示。它可以通過不同的算法生成,例如基于時間…

爆料 iOS 18引入ChatGPT!蘋果與OpenAl達成合作

蘋果公司計劃在iOS 18中引入OpenAI的ChatGPT,標志著蘋果與OpenAI之間達成了重要的合作關系。這一合作預計將在2024年的全球開發者大會(WWDC)上成為焦點。以下是對這一合作事件的詳細分析: 合作背景 技術趨勢:隨著ChatG…

postgressql——Tuple學習(2)

Tuple含義 作用 PG并沒有像Oracle那樣的undo來存放舊數據,而且PG沒有真正意義上的delete,而是將舊版本直接存放于relation文件中,也就是成為了dead tuple。我們可以理解成“過期的數據”含義 tuple就相當于一個存儲數據的小容器,…

#媒體#知識分享#職場發展

光速論文是一款優秀的論文寫作、查重降重工具,備受學術界和科研人員的青睞。關于“光速論文靠譜不”的問題,筆者認為光速論文絕對是一個非常靠譜的工具,以下就為大家詳細介紹一下它的優點。 首先,光速論文提供了豐富的論文寫作模…

win下ssh配置gitlab的問題

項目場景: win環境下gitlab的ssh配置中遇到的問題 問題描述和原因分析 1、倉庫的gitlab的端口不是默認22 2、gitlab的know_host數據無清除,曾經連接過,公鑰密鑰對是重新生成的 以上,都會導致gitlab的ssh配置不成功,…

sql查詢精準替換

select a.formid,a.ApplyUser,a.ApplyDate,a.DepartmentName,a.OperatorName,a.EventDescription,a.SystemName, REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(SystemName, ‘3|’, ‘投資交易系統、’), ‘5|’, ‘估值系統、’), ‘6|’…

【機器學習】解鎖AI密碼:神經網絡算法詳解與前沿探索

👀傳送門👀 🔍引言🍀神經網絡的基本原理🚀神經網絡的結構📕神經網絡的訓練過程🚆神經網絡的應用實例💖未來發展趨勢💖結語 🔍引言 隨著人工智能技術的飛速發…

視頻集中存儲LntonCVS視頻監控匯聚平臺智慧園區應用方案

智慧園區,作為現代化城市發展的重要組成部分,承載著產業升級的使命,是智慧城市建設的重要體現。在當前產業園區競爭日益激烈的情況下,越來越多的用戶關注如何將項目打造成完善的智慧園區。 在智慧園區的建設過程中,各類…

【Linux】使用 s3fs 掛載 MinIO 桶

s3fs(S3 File System)是一個基于FUSE(Filesystem in Userspace)的用戶空間文件系統,可以將Amazon S3存儲桶掛載到本地文件系統。通過s3fs,我們可以像操作本地文件一樣,對S3存儲桶中的數據進行讀…

【CALayer-CALayer的基本屬性 Objective-C語言】

一、接下來,我們來說這個Layer啊, 1.首先,Layer能接觸到的,就是我們之前說截圖啊,就是我們self.view里面,有一個layer屬性, [self.view.layer renderInContext:(CGContextRef t)]; 那個里面,有一個layer屬性,然后呢,是CALayer類型的, 接下來,我們就來學習一…

Vim安裝與配置教程(解決軟件包Vim沒有安裝可候選)

一、Vim檢測是否安裝 1-輸入vi查看是否安裝; 2-按Tab鍵,顯示以下字符為未安裝; 3-顯示以下字符為已安裝(可以看到有Vim) 二、Vim安裝過程 1. 打開終端,輸入 sudo apt install vim; 2. 輸入Y/y&#xff…

來聊聊Redis簡單動態字符串SDS

寫在文章開頭 我們都知道redis基于單線程實現的一個高性能內存數據庫,所以了解其底層設計,會讓我們具備一個從微觀的視角極致壓榨redis性能的能力,這其中對于數據結構的設計也是非常巧妙,所以關于redis源碼解析的系列將直接從最基本的字符串的設計說起。 Hi,我是 sharkCh…

母嬰商城購物網站,基于 SpringBoot+Vue+MySQL 開發的前后端分離的母嬰商城購物網站設計實現

目錄 一. 前言 二. 功能模塊 2.1. 前臺功能 2.2. 用戶信息管理 2.3. 商品分類管理 2.4. 商品信息管理 2.5. 商品資訊管理 三. 部分代碼實現 四. 源碼下載 一. 前言 現代經濟快節奏發展以及不斷完善升級的信息化技術,讓傳統數據信息的管理升級為軟件存儲&a…

Python實現多線程下載器

分析:實現?個多線程下載器可以顯著提?數據抓取的效率,特別是當需要下載?量數據時。Python的threading 庫可以幫助輕松實現多線程下載。 Python代碼: 使? requests 庫來下載數據,并使? threading 庫來并?處理多個下載任務。…

盤點好用的國產傳輸軟件,看看哪個適合你

流動讓數據釋放價值,無論什么企業,什么行業,業務的正常開展均是以數據和文件的傳輸為基礎,因此,對企業來說,文件傳輸工具是最基礎但也是最舉重若輕的。在琳瑯滿目的多種國產傳輸軟件中,哪個是最…

Glassnode 內容主管:「減半」后的市場「抑郁」

原文標題:《Finance Bridge: Post-Halving Blues》撰文:Marcin Mi?osierny,Glassnode 內容主管編譯:Chris,Techub News 文章來源香港Web3媒體Techun News 摘要: 每月簡報:4 月,盡…

WPF實現簡單的3D圖形

簡述 Windows 演示基礎 (WPF) 提供了一種功能,用于根據應用程序要求繪制、轉換 3D 圖形并為其添加動畫效果。它不支持完整的3D游戲開發,但在某種程度上,您可以創建3D圖形。 通過組合 2D 和 3D 圖形,您還可以…

Maven多環境配置與Spring Boot日志定制實戰指南

前言 在軟件開發過程中,根據不同的環境(如開發、測試、生產)調整配置和日志級別是一項常見的需求。本文將詳細介紹如何在Maven項目中使用profile來管理多環境配置,并結合Spring Boot項目,實現日志級別的靈活定制。這不…

gitlab之docker-compose漢化離線安裝

目錄 概述離線資源docker-compose結束 概述 gitlab可以去 hub 上拉取最新版本,在此我選擇漢化 gitlab ,版本 11.x 離線資源 想自制離線安裝鏡像,請穩步參考 docker鏡像的導入導出 ,無興趣的直接使用在此提供離線資源 百度網盤(鏈…

14-云原生監控體系-Redis_exporter 監控 MySQL[部署Dashborad告警規則實戰]

文章目錄 環境準備切片集群主從哨兵1. 部署1.1. 二進制方式1.1.1. 下載二進制包1.1.2. 部署1.2. docker-compose 容器方式1.3. 配置連接&認證參數1.3.1. 連接認證參數1.3.2. 配置服務控制 systemd2. 配置到 Prometheus3 Dashboard4. 告警規則