1. 程式人生 > >【記錄】float:right和position:absolute的問題

【記錄】float:right和position:absolute的問題

記錄一下網頁開發過程中遇到的奇奇怪怪的問題及解決方法。

目標是做一個側邊導航,導航頁面預設不顯示,當滑鼠懸停在側邊導航欄上時彈出。

左右兩邊都有,於是用了float,問題出現了:左邊的導航執行正常,右邊的卻會在彈出時向右出現從而超出頁面寬度,出現橫向滾動條。

之前的寫法是nav-container向右浮動,nav-right和nav-right-hide絕對定位後向右浮動

解決辦法:在nav-right的樣式裡新增:right:0;

這樣就好了

圖如下:

預設側邊導航欄:


滑鼠懸停後的理想效果:


錯誤懸停效果,向右出現,超出頁面寬度:


相關推薦

記錄float:rightposition:absolute的問題

記錄一下網頁開發過程中遇到的奇奇怪怪的問題及解決方法。 目標是做一個側邊導航,導航頁面預設不顯示,當滑鼠懸停在側邊導航欄上時彈出。 左右兩邊都有,於是用了float,問題出現了:左邊的導航執行正常,右邊的卻會在彈出時向右出現從而超出頁面寬度,出現橫向滾動條。 之前的寫法是n

記錄Java五個最常用的集合類之間的區別聯絡

常用的集合類有一下幾種: List結構的集合類:ArrayList類,LinkedList類,Vector類,Stack類 Map結構的集合類:HashMap類,Hashtable類 Set結構的集合類:HashSet類,TreeSet類 Queue結構的集合:Q

記錄Windows下DNWuboot燒寫

準備 uboot在NORFLASH中,所以先設定設定撥碼開關,選擇NORFLASH啟動 開啟SecureCRT,用於操作uboot,檢視串列埠資訊 開啟DNW工具,傳送檔案 燒寫 重啟板卡

Spring使用SpringAMQP發送接收消息(上)

com load 設定 支持 消息發送 結果 alt 來看 接下來 講AMQP之前,先講下傳統的JMS的消息模型,JMS中主要有三個參與者:消息的生產者、消費者、傳遞消息的通道(隊列或者主題),兩種消息模型如下:通道是隊列: 通道是隊列: 通道是主題: 在JMS中,雖然

win10 Oracle11g 64位配置PL/SQL Developer記錄

oci per 文件夾 sdn rod tns logs min 工具 在 http://download.csdn.net/download/wuqinfei_cs/7740373 下載PL/SQL Developer。 1. 解壓,在instantclient_11_

LintCode060.Search Insert Position

spa posit art you sta ger har duplicate earch 題目: Given a sorted array and a target value, return the index if the target is found. If no

關於LIS一類可以用樹狀數組優化的DP 預備知識

免費 關註 最長上升子序列 2.3 bzoj1264 一個數 long 個數字 等於 原文鏈接 http://www.cnblogs.com/liu-runda/p/6193690.html 預備知識     DP(Dynamic Programming)

easyui中 datagrid與pagination結合使用記錄

fit def ext flag break nowrap isp emp inline /** * Js名稱:客源基本管理 * */ var setPageNumber = 1; var setPageSize = 10; var guestManageLis

記錄ASP.NET MVC View 移動版瀏覽的奇怪問題

手機瀏覽器 超鏈接 jquery 記錄 元素 ASP.NET MVC View 中的一段代碼:<span id="span_Id">@Model.ID</span>沒什麽問題吧,瀏覽器瀏覽正常,查看元素為:<span id="span_Id">12345

androiduses-permissionpermission具體解釋

.com 新的 -i weight bsp htm fin article 程序 1.<uses-permission>: 官方描寫敘述: If an application needs access to a feature prote

Visual C++ C++ 有什麽區別?

業界 流行 編譯器 gtk+ 語言 開發 多種實現 廠商 計算 有位同學問我“Visual C++和C++有什麽區別?”,這的確是初學者會感到困惑的問題,比較常見。除此之外,還有“先學C++好,還是先學Visual C++好?”,都屬於同樣的概念不明的問題,就比

記錄今日上午○線段樹

lin adding images 難點 微軟 9.png 要求 bottom 如何 ●poj 3225 Help with Intervals ○贅述題目: 給出以下集合操作: 然後有初始的一個空集S,和以下題目給出的操作指令,並輸入指令: 要求進行指令操作後,按格式

Nginx--1http代理反向代理

nginx【1】代理服務;是一個位於客戶端和原始服務器之間的服務器,為了從原始服務器取得內容,客戶端向代理發送一個請求並指定目標(原始服務器),然後代理向原始服務器轉交請求並將獲得的內容返回給客戶端。客戶端必須要進行一些特別的設置才能使用正向代理。【2】反向代理:用戶某個服務器他是偷偷從另外一臺服務器上取回來

理解Callable Spring DeferredResult

控制 defer -a word int https .html getc when http://www.cnblogs.com/aheizi/p/5659030.html 1-介紹 Servlet 3中的異步支持為在另一個線程中處理HTTP請求提供了可能性。當

jar包war包的介紹區別

lac rep 理解 j2e 浪費時間 需要 適合 格式 nbsp JavaSE程序可以打包成Jar包(J其實可以理解為Java了),而JavaWeb程序可以打包成war包(w其實可以理解為Web了)。然後把war發布到Tomcat的webapps目錄下,Tomcat會在啟

abstract classinterface的區別

其中 帶來 靜態 進行 都沒有 無需 bstr 價值 bastract 在編程語言中,abstract class和interface是支持抽象類定義的兩種機制。abstract class和interface之間在對於抽象類定義的支持方面具有很大的相似性,甚至可以相互替

Spark StreamingKafka整合開發指南

thread ada 關系 方法 拷貝 理解 1.2 reduce arr 基於Receivers的方法 這個方法使用了Receivers來接收數據。Receivers的實現使用到Kafka高層次的消費者API。對於所有的Receivers,接收到的數據將會保存在Spark

轉載穩定排序非穩定排序

很快 第一個元素 最大 冒泡 由於 同步 多次 基於 中移動 這幾天筆試了好幾次了,連續碰到一個關於常見排序算法穩定性判別的問題,往往還是多選,對於我以及和我一樣拿不準的同學可不是一個能輕易下結論的題目,當然如果你筆試之前已經記住了數據結構書上哪些是穩定的,哪些

Python元編程動態屬性特性

class join write msg pen mut quest pin sys #19.1 使用動態屬性轉換數據"""#栗子19-2 osconfeed.py:下載 osconfeed.jsonfrom urllib.request import urlopenimp

轉載序列化反序列化

bject require 大數 ddl 大數據量 data html 常量 天然 #摘要序列化和反序列化幾乎是工程師們每天都要面對的事情,但是要精確掌握這兩個概念並不容易:一方面,它們往往作為框架的一部分出現而湮沒在框架之中;另一方面,它們會以其他更容易理解的概念出現,例