(转)E6/IE7下ul左浮动后li的左边距增大的解决方法

本文详细介绍了在IE6/IE7浏览器中,当使用<ul>元素进行左浮动时,内部<li>元素出现左侧边距增大的现象,并提供了通过设置li的list-style-position为outside来解决此问题的方法。
在IE6/IE7下,将<ul>左浮动后,内部的li会出现左边距增大的情况,如图:
正常的效果如下图所示:
IE6/IE7下ul左浮动后li的左边距增大的解决方法
ie6下的效果下图所示:左侧边距明显变大,且无法使用margin,padding控制。
IE6/IE7下ul左浮动后li的左边距增大的解决方法
解决方法:
将ul下li的list-style-position设置为outside,li内的文字即可恢复原状回到最左边
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>泰信应用商城管理系统</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <style> /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei', Arial, sans-serif; } body { background-color: #f5f7fa; color: #333; } /* 顶部导航栏 */ .header { background: linear-gradient(135deg, #0066cc, #004080); color: white; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; top: 0; z-index: 1000; } .header h1 { font-size: 22px; font-weight: 500; } .user-info { font-size: 14px; } .user-info a { color: white; text-decoration: none; margin-left: 10px; padding: 5px 10px; border-radius: 4px; transition: background 0.3s; } .user-info a:hover { background: rgba(255, 255, 255, 0.2); } /* 主容器 */ .container { display: flex; margin-top: 60px; min-height: calc(100vh - 60px); } /* 侧菜单 */ .nav { width: 220px; background: white; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05); position: fixed; height: 100%; padding-top: 20px; overflow-y: auto; } .nav ul { list-style: none; } .nav li { border-bottom: 1px solid #f0f0f0; } .nav a { display: block; padding: 15px 25px; color: #555; text-decoration: none; transition: all 0.3s; font-size: 14px; } .nav a:hover { background: #f8f9fa; color: #0066cc; border-left: 3px solid #0066cc; padding-left: 22px; } .nav a.active { background: #e6f2ff; color: #0066cc; border-left: 3px solid #0066cc; font-weight: 500; } /* 右侧内容区 */ .content { flex: 1; margin-left: 220px; padding: 30px; background: white; min-height: calc(100vh - 60px); box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05); } .content h2 { color: #0066cc; margin-bottom: 20px; font-weight: 500; font-size: 24px; padding-bottom: 15px; border-bottom: 1px solid #eee; } .content p { line-height: 1.6; color: #666; } /* 响应式设计 */ @media (max-width: 768px) { .nav { width: 180px; } .content { margin-left: 180px; padding: 20px; } } </style> </head> <body> <!-- 顶部导航栏 --> <div class="header"> <h1>泰信应用商城管理系统</h1> <div class="user-info"> 欢迎, <%= session.getAttribute("username") %> | <a href="login.jsp">退出</a> </div> </div> <!-- 主容器 --> <div class="container"> <!-- 侧菜单 --> <div class="nav"> <ul> <li><a href="provider.jsp" class="active">应用提供商</a></li> <li><a href="category.jsp">应用分类管理</a></li> <li><a href="app.jsp">应用新加</a></li> <li><a href="upgrade.jsp">应用升级</a></li> <li><a href="signature.jsp">应用签名</a></li> </ul> </div> <!-- 右侧内容区 --> <div class="content"> <h2>欢迎使用泰信应用商城管理系统</h2> <p>请从侧导航栏选择您要操作的功能模块。</p> <!-- 可以在这里添加仪表盘内容 --> <div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 6px;"> <h3 style="color: #555; margin-bottom: 15px;">系统概览</h3> <p>当前系统版本:v1.0.0</p> <p>最后登录时间:<%= new java.util.Date() %></p> </div> </div> </div> </body> </html> 修改代码 还是侧菜单中 一行一行显示 不要隐藏
最新发布
09-17
将代码中的class、id,换成简单的名字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei', sans-serif; } body { background-color: #f0f2f5; color: #333; line-height: 1.6; padding: 20px; } /* 主内容区 */ .main-content { overflow: hidden; /* 清除浮动 */ } /* 侧边栏 - 使用浮动布局 */ .sidebar { float: right; width: 200px; height: 540px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 15px; } .sidebar h3 { padding-bottom: 10px; margin-bottom: 15px; text-align: center; border-bottom: 2px solid #e0e0e0; } .sidebar ul { list-style: none; } .sidebar li { text-align: center; padding: 10px; margin-bottom: 8px; background-color: #f5f7fa; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; } .sidebar li:hover { background-color: #e6f0ff; color: #141415; } .sidebar li.active { color: rgb(22, 21, 21); } /* 内容区 - 使用浮动布局 */ .content { float: left; width: calc(100% - 220px); background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 20px; } /* 题目头部 */ .question-header { overflow: hidden; /* 清除浮动 */ margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; } .question-header p { float: left; color: #1e5799; } .controls { float: right; } /* 按钮样式 */ .btn { display: inline-block; padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: all 0.2s ease; text-align: center; } .btn-primary { color: rgb(11, 11, 11); } .btn-danger { color: rgb(22, 22, 22); } .btn-secondary { color: rgb(9, 9, 9); } .btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* 题目列表 */ .question-list { margin-top: 20px; } .question-item { background-color: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 25px; position: relative; } .question-title { overflow: hidden; /* 清除浮动 */ margin-bottom: 15px; } .question-title h4 { float: left; color: #007bff; } .delete-btn { float: right; } /* 输入框样式 */ .question-input { display: block; /* width: 100%; */ padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } /* 选项样式 */ .option-item { margin-bottom: 12px; overflow: hidden; /* 清除浮动 */ } .option-label { float: left; width: 30px; height: 30px; line-height: 30px; text-align: center; color: rgb(32, 30, 30); border-radius: 50%; font-weight: bold; margin-right: 10px; margin: auto; } .option-input { margin: auto; float: left; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .select-btn { float: right; color: rgb(14, 13, 13); width: 100px; } /* 选项控制 */ .option-controls { text-align: center; margin-top: 15px; } /* 页脚按钮 */ .footer { text-align: center; margin-top: 30px; } </style> </head> <body> <div class="main-content"> <div class="sidebar"> <h3>题目类型</h3> <ul> <li class="active">单选题</li> </ul> </div> <div class="content"> <div class="question-header"> <p>单选题</p> <div class="controls"> <button class="btn btn-primary" id="addQuestion">添加题目</button> <button class="btn btn-danger" id="clearAll">清空所有</button> </div> </div> <div class="question-list" id="questionList"> <div class="empty-state"> </div> </div> <div class="footer"> <button class="btn btn-primary footer-btn" id="submitBtn">提交保存</button> <button class="btn btn-secondary footer-btn" id="resetBtn">重新编辑</button> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function () { // 获取DOM元素 const questionList = document.getElementById('questionList'); const addQuestionBtn = document.getElementById('addQuestion'); const clearAllBtn = document.getElementById('clearAll'); const submitBtn = document.getElementById('submitBtn'); const resetBtn = document.getElementById('resetBtn'); // 初始化题目数据 let questions = JSON.parse(localStorage.getItem('questions')) || []; // 初始化渲染 renderQuestions(); // 添加题目事件 addQuestionBtn.addEventListener('click', function () { questions.push({ id: Date.now(), title: '', options: [ { id: 1, text: '', correct: false }, { id: 2, text: '', correct: false }, { id: 3, text: '', correct: false }, { id: 4, text: '', correct: false } ] }); saveAndRender(); }); // 清空所有题目 clearAllBtn.addEventListener('click', function () { if (confirm('确定要清空所有题目吗?此操作不可恢复!')) { questions = []; saveAndRender(); } }); // 提交保存 submitBtn.addEventListener('click', function () { localStorage.setItem('questions', JSON.stringify(questions)); alert('题目已成功保存!'); }); // 重新编辑 resetBtn.addEventListener('click', function () { questions = JSON.parse(localStorage.getItem('questions')) || []; renderQuestions(); alert('已恢复上次保存的内容'); }); // 题目列表点击事件委托 questionList.addEventListener('click', function (e) { if (!e.target.closest('.question-item')) return; const questionId = parseInt(e.target.closest('.question-item').dataset.id); const question = questions.find(q => q.id === questionId); // 删除题目 if (e.target.classList.contains('delete-btn')) { if (confirm('确定要删除这道题目吗?')) { questions = questions.filter(q => q.id !== questionId); saveAndRender(); } } // 选择正确答案 if (e.target.classList.contains('select-btn')) { const optionId = parseInt(e.target.dataset.optionId); // 重置所有选项 question.options.forEach(opt => opt.correct = false); // 设置当前选项为正确答案 question.options.find(opt => opt.id === optionId).correct = true; saveAndRender(); } // 添加选项 if (e.target.classList.contains('add-option')) { const newId = question.options.length > 0 ? Math.max(...question.options.map(opt => opt.id)) + 1 : 1; question.options.push({ id: newId, text: '', correct: false }); saveAndRender(); } // 删除选项 if (e.target.classList.contains('delete-option')) { if (question.options.length <= 4) { alert('至少需要保留4个选项!'); return; } question.options.pop(); saveAndRender(); } }); // 输入事件处理(无防抖) questionList.addEventListener('input', function (e) { if (!e.target.closest('.question-item')) return; const questionId = parseInt(e.target.closest('.question-item').dataset.id); const question = questions.find(q => q.id === questionId); // 题目输入 if (e.target.classList.contains('question-input')) { question.title = e.target.value; } // 选项输入 if (e.target.classList.contains('option-input')) { const optionId = parseInt(e.target.dataset.optionId); const option = question.options.find(opt => opt.id === optionId); option.text = e.target.value; } saveQuestions(); // 只保存不重新渲染 }); // 保存题目到localStorage function saveQuestions() { localStorage.setItem('questions', JSON.stringify(questions)); } // 保存并重新渲染 function saveAndRender() { saveQuestions(); renderQuestions(); } // 渲染题目列表 function renderQuestions() { questionList.innerHTML = questions.map((question, index) => { const optionsHtml = question.options.map(option => ` <div class="option-item"> <div class="option-label">${String.fromCharCode(64 + option.id)}</div> <input type="text" class="option-input" placeholder="选项内容..." value="${option.text}" data-option-id="${option.id}" > <button class="select-btn" data-option-id="${option.id}" style="background: ${option.correct ? '#28a745' : ''}" > ${option.correct ? '✓ 已选' : '选择'} </button> </div> `).join(''); return ` <div class="question-item" data-id="${question.id}"> <div class="question-title"> <h4>题目 ${index + 1}</h4> <button class="btn btn-danger delete-btn">删除</button> </div> <input type="text" class="question-input" placeholder="请输入题目内容..." value="${question.title}" > <div class="options-list"> ${optionsHtml} </div> <div class="option-controls"> <button class="btn btn-secondary add-option">添加选项</button> <button class="btn btn-danger delete-option">删除选项</button> </div> </div> `; }).join(''); } }); </script> </body> </html>
08-04
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值