jsp定义方法与css的inline-block

最新推荐文章于 2023-06-25 15:41:41 发布
原创 最新推荐文章于 2023-06-25 15:41:41 发布 · 793 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jsp #css #servlet #service

本文探讨了JSP中的<% %>与<%! %>的区别，前者用于页面输出，后者用于定义成员变量及方法。此外还介绍了如何利用CSS的display:inline-block属性使元素在不换行的情况下控制宽度和高度。
 

jsp标签中<% %>中的内容相当于在servlet的service方法中，此处似无法定义方法。

<%! %>中的内容相当于servlet类的成员变量与方法。

 

css的width、height属性无法设置给display:inline的元素，如果需要元素不换行显示同时又控制长宽，可使用inline-block。

CSS+DIV让文字内容居中___display:inline、block、inline-block的区别
jzgl_cadn的专栏
09-19 477
[code="HTML"] Untitled Document vertical-align:middle; } --> teststsetsetsetdisplay:inline-block; [/code] [b]display:block就是将元素显示为块级元素. [/b]　　 block元...
block(块元素)、inline(内联元素)
dd_dd1234的博客
03-25 268
　　我们首先要了解，所有的html元素，都要么是block(块元素)、要么是inline(内联元素)。下面了解一下block、inline各自的特点： 　　block元素的特点：　　总是在新行上开始；　　高度，行高以及顶和底边距都可控制；　　宽度缺省是它的容器的100%，除非设定一个宽度。 　　inline元素的特点： 　　和其他元素都在一行上；　　高，行高及顶和底边距不可改变；　　...
inline、block、inline-block的区别
weixin_30314793的博客
08-11 165
我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象，block是声明块对象，那么inline-block是什么意思，即内联又成块？接下来做个测试，让我们了解一下三者的区别和作用吧： <html xmlns="http://www.w3.org/1999/xhtml"> <head> &lt...
JSP知识汇总
这波超级帅
03-26 507
1、HTML元素分类： 内联（display:inline） 块级(display:block)2、CSS组成三部分：选择器、属性、值 选择器分类：div{width:100%} 类选择器 .a{text-size:20} class选择器 #b{text-size:10} id选择器3、常用浏览器对象 window、loca...
Block传值
tb_show的博客
05-17 261
首先，创建两个继承于ViewController的类A，B ---------------Block------------------ ／／B类中 ／／声明一个Block typealias TestBlock = (String,String) -> Void ／／创建对象 var block:TestBlock? override func vie
下列代码中点击功能模块跳转不了，请考虑使用超链接href生成：“<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="javax.servlet.http.HttpServletRequest"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>系统导航菜单</title> <!-- 引入EasyUI资源 --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script> <style> .menu-container { padding: 5px; } .menu-title { font-weight: bold; color: #2c3e50; padding: 8px 5px; border-bottom: 1px dashed #eee; } .menu-item { margin: 3px 0; } .menu-item a { display: block; padding: 8px 5px 8px 25px; text-decoration: none; color: #34495e; transition: all 0.3s; } .menu-item a:hover { background-color: #ecf0f1; color: #3498db; } .menu-section { margin-bottom: 15px; } </style> </head> <body> <div class="easyui-accordion" data-options="fit:true,border:false"> <!-- 商品管理模块 --> <div title="商品管理" data-options="iconCls:'icon-product'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('商品列表','../proinfomgmt/ProInfolist.jsp')"> <span class="icon icon-list" style="display:inline-block;width:16px;"></span> 商品基本信息列表 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('商品查询','../proinfomgmt/QueryProInfoSelectVal.jsp')"> <span class="icon icon-search" style="display:inline-block;width:16px;"></span> 商品列表查询 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('商品查询','../proinfomgmt/QueryProInfo.jsp')"> <span class="icon icon-filter" style="display:inline-block;width:16px;"></span> 查询商品基本信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('多条件查询','../proinfomgmt/QueryProInfoMultConds.jsp')"> <span class="icon icon-advanced-search" style="display:inline-block;width:16px;"></span> 多条件查询商品 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('添加商品','../proinfomgmt/AddProInfo.jsp')"> <span class="icon icon-add" style="display:inline-block;width:16px;"></span> 添加商品基本信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('商品维护','../proinfomgmt/ProInfolistforModi.jsp')"> <span class="icon icon-edit" style="display:inline-block;width:16px;"></span> 修改或删除商品 </a> </div> </div> </div> <!-- 库存管理模块 --> <div title="库存管理" data-options="iconCls:'icon-inventory'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('库存列表','../invinfomgmt/Invinfolist.jsp')"> <span class="icon icon-list" style="display:inline-block;width:16px;"></span> 库存信息列表 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('库存查询','../invinfomgmt/QueryInvInfoMultConds.jsp')"> <span class="icon icon-search" style="display:inline-block;width:16px;"></span> 多条件查询库存 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('库存查询','../invinfomgmt/QueryInvInfoSelectVal.jsp')"> <span class="icon icon-filter" style="display:inline-block;width:16px;"></span> 库存列表查询 </a> </div> </div> </div> <!-- 入库管理模块 --> <div title="入库管理" data-options="iconCls:'icon-inbound'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('添加入库','../Inbinfomgmt/AddInbInfo.jsp')"> <span class="icon icon-add" style="display:inline-block;width:16px;"></span> 添加入库信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('入库维护','../Inbinfomgmt/InbInfolistforModi.jsp')"> <span class="icon icon-edit" style="display:inline-block;width:16px;"></span> 修改或删除入库 </a> </div> </div> </div> <!-- 出库管理模块 --> <div title="出库管理" data-options="iconCls:'icon-outbound'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('添加出库','../Outinfomgmt/AddOutInfo.jsp')"> <span class="icon icon-add" style="display:inline-block;width:16px;"></span> 添加出库信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('出库维护','../Outinfomgmt/OutInfolistforModi.jsp')"> <span class="icon icon-edit" style="display:inline-block;width:16px;"></span> 修改或删除出库 </a> </div> </div> </div> <!-- 用户管理模块（带权限控制） --> <% String operator_id = (String) request.getSession().getAttribute("user"); if ("U202340848".equals(operator_id)) { %> <div title="系统管理" data-options="iconCls:'icon-system'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('员工密码重置','../userinfomgmt/UserInfolistforModi_1.jsp')"> <span class="icon icon-lock" style="display:inline-block;width:16px;"></span> 员工重置密码 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('添加员工','../userinfomgmt/AddUserInfo.jsp')"> <span class="icon icon-user-add" style="display:inline-block;width:16px;"></span> 管理员添加员工 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('员工列表','../userinfomgmt/UserInfolist_1.jsp')"> <span class="icon icon-user-list" style="display:inline-block;width:16px;"></span> 管理员查看员工 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('员工维护','../userinfomgmt/UserInfolistforModi.jsp')"> <span class="icon icon-user-edit" style="display:inline-block;width:16px;"></span> 员工信息维护 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('员工查询','../userinfomgmt/QueryUserInfoSelectVal.jsp')"> <span class="icon icon-search" style="display:inline-block;width:16px;"></span> 查询员工信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('精准查询','../userinfomgmt/QueryUserInfo.jsp')"> <span class="icon icon-filter" style="display:inline-block;width:16px;"></span> 精准查询员工 </a> </div> </div> </div> <% } else { %> <div title="个人设置" data-options="iconCls:'icon-user'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('密码重置','../userinfomgmt/UserInfolistforModi_1.jsp')"> <span class="icon icon-lock" style="display:inline-block;width:16px;"></span> 重置我的密码 </a> </div> </div> </div> <% } %> </div> <script> // 添加选项卡函数 function addTab(title, url){ if ($('#mainTabs').tabs('exists', title)){ $('#mainTabs').tabs('select', title); } else { $('#mainTabs').tabs('add',{ title: title, href: url, closable: true, bodyCls: 'tab-content' }); } } // 初始化手风琴菜单 $(function(){ $('.easyui-accordion').accordion(); }); </script> </body> </html> ”
07-06
<span class="icon icon-list" style="display:inline-block;width:16px;"> 商品基本信息列表 <div class="menu-item"> ${pageContext.request.contextPath}/proinfomgmt/QueryProInfoSelectVal.jsp" target...
<?xml version='1.0' encoding='UTF-8'?> <f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>五轴/七轴排产看板</title> <h:outputScript library="js" name="LkmPmi.js?v=20250910"/> <h:outputScript library="js" name="AxisProcessMonitor.js?v=20250922"/> <h:outputStylesheet library="css" name="AxisProcesshMonitor.css?v=20250930h"/> </h:head> <h:body> <h:form> <c:set var="monitor" value="#{axisProcessBean.axisProcessMonitor}"/> <p:remoteCommand name="msg_rc" actionListener="#{axisProcessBean.receiveMsg}" update="@form"/> <p:outputPanel styleClass="monitor-status-bar"> <p:outputLabel styleClass="status-bar-item" value="数据:" style="margin-right:5px"> <h:outputText value="#{monitor.msgDate}"> <f:convertDateTime pattern="HH:mm" timeZone="GMT+8"/> </h:outputText> </p:outputLabel> <p:outputLabel styleClass="status-bar-item" value="#{axisProcessBean.ip}" style="margin-right:5px"/> <p:outputLabel id="status_id" styleClass="status-bar-item status-label" value="#{axisProcessBean.status}"/> </p:outputPanel> <div class="container"> <header class="region region-one"> <p:outputLabel value="[#{monitor.monitorName}]进度看板" style="font-size:45px;font-weight:bold"/> </header> <main class="region region-three"> <div class="container-flex"> <!-- 左侧区域 --> <div class="left-section"> <p:outputPanel id="axis_panel" class="scroll-part" rendered="#{monitor.jingKuangList.size() > 0}"> <h3>卧加精框</h3> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="订单货期" style="font-size:35px;width:300px;display: inline-block;"/> <p:spacer height="20"/> <p:outputLabel value="总工时" style="font-size:35px;width:200px;display: inline-block;"/> <p:spacer height="20"/> </p:outputPanel> <p:repeat value="#{monitor.jingKuangList}" var="item"> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="#{item.requestDateV2}" style="font-size:80px;width:300px;display: inline-block;"> <f:convertDateTime pattern="dd日/MM" timeZone="GMT+8"/> </p:outputLabel> <p:spacer height="20"/> <p:outputLabel value="#{item.allProcessHour}H" style="font-size:80px;width:200px;display: inline-block;"/> </p:outputPanel> </p:repeat> </p:outputPanel> <p:outputPanel id="axis_panel2" class="scroll-part" rendered="#{monitor.jingKuangList.size() == 0}"> <p:outputLabel value="暂无货期订单跟进" style="font-size:45px;"/> </p:outputPanel> </div> <!-- 右侧区域 --> <div class="right-section"> <p:outputPanel id="axis_panelV2" class="scroll-part" rendered="#{monitor.qiangZuanList.size() > 0}"> <h3>七轴枪钻</h3> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="订单货期" style="font-size:35px;width:300px;display: inline-block;"/> <p:spacer height="20"/> <p:outputLabel value="总工时" style="font-size:35px;width:200px;display: inline-block;"/> <p:spacer height="20"/> </p:outputPanel> <p:repeat value="#{monitor.qiangZuanList}" var="itemV2"> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="#{itemV2.requestDateV2}" style="font-size:80px;width:300px;display: inline-block;"> <f:convertDateTime pattern="dd日/MM" timeZone="GMT+8"/> </p:outputLabel> <p:spacer height="20"/> <p:outputLabel value="#{itemV2.allProcessHour}H" style="font-size:80px;width:200px;display: inline-block;"/> </p:outputPanel> </p:repeat> </p:outputPanel> <p:outputPanel id="axis_panel2V2" class="scroll-part" rendered="#{monitor.qiangZuanList.size() == 0}"> <p:outputLabel value="暂无货期订单跟进" style="font-size:45px;"/> </p:outputPanel> </div> </div> </main> </div> </h:form> </h:body> </f:view> 想让五轴精框和七轴枪钻 左右分布，当前是上下分布
12-06
### ✅ CSS 建议（重点在 `.container-flex` 和 `.left-section / .right-section`） ```css .container-flex { display: flex; justify-content: space-between; align-items: flex-start; /* 顶部对齐 */ gap...
<?xml version='1.0' encoding='UTF-8'?> <f:view xmlns=“http://www.w3.org/1999/xhtml” xmlns:f=“http://java.sun.com/jsf/core” xmlns:h=“http://java.sun.com/jsf/html” xmlns:ui=“http://java.sun.com/jsf/facelets” xmlns:c=“http://java.sun.com/jsp/jstl/core” xmlns:p=“http://primefaces.org/ui”> <h:head> 五轴/七轴排产看板 <h:outputScript library=“js” name=“LkmPmi.js?v=20250910”/> <h:outputScript library=“js” name=“AxisProcessMonitor.js?v=20250922”/> <h:outputStylesheet library=“css” name=“AxisProcesshMonitor.css?v=20250930h”/> * { box-sizing: border-box; } .region.region-three { width: 100%; } .left-section, .right-section { padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; } .item-processed { background-color: white; border-radius: 0px; } </h:head> <h:body> <h:form> <c:set var=“monitor” value=“#{axisProcessBean.axisProcessMonitor}”/> <p:remoteCommand name=“msg_rc” actionListener=“#{axisProcessBean.receiveMsg}” update=“@form”/> <p:outputPanel styleClass=“monitor-status-bar”> <p:outputLabel styleClass=“status-bar-item” value=“数据:” style=“margin-right:5px”> <h:outputText value=“#{monitor.msgDate}”> <f:convertDateTime pattern=“HH:mm” timeZone=“GMT+8”/> </h:outputText> </p:outputLabel> <p:outputLabel styleClass=“status-bar-item” value=“#{axisProcessBean.ip}” style=“margin-right:5px”/> <p:outputLabel id=“status_id” styleClass=“status-bar-item status-label” value=“#{axisProcessBean.status}”/> </p:outputPanel> <p:outputLabel value=“[#{monitor.monitorName}]进度看板” style=“font-size:45px;font-weight:bold”/> <main class="region region-three"> <div class="container-flex"> <!-- 左侧区域 --> <div class="left-section" style="width:40%"> <p:outputPanel id="axis_panel" class="scroll-part" style="margin:0 auto" rendered="#{monitor.jingKuangList.size() > 0}"> <h3 style="text-align: center;font-size:60px;font-weight: bold;">卧加精框</h3> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="订单货期" style="font-size:35px;width:300px;display: inline-block;"/> <p:spacer height="20"/> <p:outputLabel value="总工时" style="font-size:35px;width:200px;display: inline-block;"/> <p:spacer height="20"/> </p:outputPanel> <p:repeat value="#{monitor.jingKuangList}" var="item"> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="#{item.requestDateV2}" style="font-size:80px;width:300px;display: inline-block;color:#{item.isPass ? 'red' : black}"> <f:convertDateTime pattern="dd日/MM" timeZone="GMT+8"/> </p:outputLabel> <p:spacer height="20"/> <p:outputLabel value="#{item.allProcessHour}H" style="font-size:80px;width:200px;display: inline-block; color:#{item.isPass ? 'red' : black}"/> </p:outputPanel> </p:repeat> </p:outputPanel> <p:outputPanel id="axis_panel2" class="scroll-part" rendered="#{monitor.jingKuangList.size() == 0}"> <p:outputLabel value="暂无货期订单跟进" style="font-size:45px;"/> </p:outputPanel> </div> <!-- 右侧区域 --> <div class="right-section" style="width:40%"> <p:outputPanel id="axis_panelV2" class="scroll-part" style="margin:0 auto" rendered="#{monitor.qiangZuanList.size() > 0}"> <h3 style="text-align: center;font-size:60px;font-weight: bold;">七轴枪钻</h3> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="订单货期" style="font-size:35px;width:300px;display: inline-block;"/> <p:spacer height="20"/> <p:outputLabel value="总工时" style="font-size:35px;width:200px;display: inline-block;"/> <p:spacer height="20"/> </p:outputPanel> <p:repeat value="#{monitor.qiangZuanList}" var="itemV2"> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="#{itemV2.requestDateV2}" style="font-size:80px;width:300px;display: inline-block;color:#{itemV2.isPass ? 'red' : black}"> <f:convertDateTime pattern="dd日/MM" timeZone="GMT+8"/> </p:outputLabel> <p:spacer height="20"/> <p:outputLabel value="#{itemV2.allProcessHour}H" style="font-size:80px;width:200px;display: inline-block;color:#{itemV2.isPass ? 'red' : black}"/> </p:outputPanel> </p:repeat> </p:outputPanel> <p:outputPanel id="axis_panel2V2" class="scroll-part" rendered="#{monitor.qiangZuanList.size() == 0}"> <p:outputLabel value="暂无货期订单跟进" style="font-size:45px;"/> </p:outputPanel> </div> </div> </main> </div> </h:form> </h:body> </f:view> 为什么不会并列布局
最新发布
12-06
#### ✅ 方法一：通过 CSS 样式表定义 ```html .container-flex { display: flex; justify-content: space-between; /* 水平分布 */ align-items: flex-start; /* 垂直对齐 */ gap: 20px; /* 左右间距 */ ...
<?xml version='1.0' encoding='UTF-8'?> <f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>五轴/七轴排产看板</title> <h:outputScript library="js" name="LkmPmi.js?v=20250910"/> <h:outputScript library="js" name="AxisProcessMonitor.js?v=20250922"/> <h:outputStylesheet library="css" name="AxisProcesshMonitor.css?v=20250930h"/> <style> * { box-sizing: border-box; } .region.region-three { width: 100%; } .left-section, .right-section { padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; } .item-processed { background-color: white; border-radius: 0px; } </style> </h:head> <h:body> <h:form> <c:set var="monitor" value="#{axisProcessBean.axisProcessMonitor}"/> <p:remoteCommand name="msg_rc" actionListener="#{axisProcessBean.receiveMsg}" update="@form"/> <p:outputPanel styleClass="monitor-status-bar"> <p:outputLabel styleClass="status-bar-item" value="数据:" style="margin-right:5px"> <h:outputText value="#{monitor.msgDate}"> <f:convertDateTime pattern="HH:mm" timeZone="GMT+8"/> </h:outputText> </p:outputLabel> <p:outputLabel styleClass="status-bar-item" value="#{axisProcessBean.ip}" style="margin-right:5px"/> <p:outputLabel id="status_id" styleClass="status-bar-item status-label" value="#{axisProcessBean.status}"/> </p:outputPanel> <div class="container"> <header class="region region-one"> <p:outputLabel value="[#{monitor.monitorName}]进度看板" style="font-size:45px;font-weight:bold"/> </header> <main class="region region-three"> <div class="container-flex"> <!-- 左侧区域 --> <div class="left-section" style="width:40%"> <p:outputPanel id="axis_panel" class="scroll-part" style="margin:0 auto" rendered="#{monitor.jingKuangList.size() > 0}"> <h3 style="text-align: center;font-size:60px;font-weight: bold;">卧加精框</h3> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="订单货期" style="font-size:35px;width:300px;display: inline-block;"/> <p:spacer height="20"/> <p:outputLabel value="总工时" style="font-size:35px;width:200px;display: inline-block;"/> <p:spacer height="20"/> </p:outputPanel> <p:repeat value="#{monitor.jingKuangList}" var="item"> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="#{item.requestDateV2}" style="font-size:80px;width:300px;display: inline-block;color:#{item.isPass ? 'red' : black}"> <f:convertDateTime pattern="dd日/MM" timeZone="GMT+8"/> </p:outputLabel> <p:spacer height="20"/> <p:outputLabel value="#{item.allProcessHour}H" style="font-size:80px;width:200px;display: inline-block; color:#{item.isPass ? 'red' : black}"/> </p:outputPanel> </p:repeat> </p:outputPanel> <p:outputPanel id="axis_panel2" class="scroll-part" rendered="#{monitor.jingKuangList.size() == 0}"> <p:outputLabel value="暂无货期订单跟进" style="font-size:45px;"/> </p:outputPanel> </div> <!-- 右侧区域 --> <div class="right-section" style="width:40%"> <p:outputPanel id="axis_panelV2" class="scroll-part" style="margin:0 auto" rendered="#{monitor.qiangZuanList.size() > 0}"> <h3 style="text-align: center;font-size:60px;font-weight: bold;">七轴枪钻</h3> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="订单货期" style="font-size:35px;width:300px;display: inline-block;"/> <p:spacer height="20"/> <p:outputLabel value="总工时" style="font-size:35px;width:200px;display: inline-block;"/> <p:spacer height="20"/> </p:outputPanel> <p:repeat value="#{monitor.qiangZuanList}" var="itemV2"> <p:outputPanel styleClass="item-processed"> <p:outputLabel value="#{itemV2.requestDateV2}" style="font-size:80px;width:300px;display: inline-block;color:#{itemV2.isPass ? 'red' : black}"> <f:convertDateTime pattern="dd日/MM" timeZone="GMT+8"/> </p:outputLabel> <p:spacer height="20"/> <p:outputLabel value="#{itemV2.allProcessHour}H" style="font-size:80px;width:200px;display: inline-block;color:#{itemV2.isPass ? 'red' : black}"/> </p:outputPanel> </p:repeat> </p:outputPanel> <p:outputPanel id="axis_panel2V2" class="scroll-part" rendered="#{monitor.qiangZuanList.size() == 0}"> <p:outputLabel value="暂无货期订单跟进" style="font-size:45px;"/> </p:outputPanel> </div> </div> </main> </div> </h:form> </h:body> </f:view> 为什么不会左右布局
12-06
但你在 `<style>` 中 **没有定义 `.container-flex` 的布局方式**，因此浏览器默认使用文档流布局（即上下排列）。 --- ### ✅ 解决方案 你需要为 `.container-flex` 添加 `display: flex` 以及相关布局样式，...
JSP页面布局的模块化分割与CSS布局实践
2. 利用display属性中的inline-block或flexbox可以更加灵活地控制模块的排列和对齐方式，适应不同屏幕尺寸的响应式设计。 3. CSS盒模型（box model）则是布局中用于控制元素边距、边框、填充和实际内容大小的基础...
JSP标签（01）
m0_74934282的博客
06-25 147
</tag><tag></tag><tag>
jsp通用分页（下）
weixin_66202611的博客
06-24 294
目录一，通用分页前端1.pageBean工具分页类2.Servlet类3.pageTag类4. tld文件5.jsp界面前言：核心思想如图 《代码分析如下》 需要新增变量保存上一次查询的条件 需要新增变量保存上一次请求的地址 需要添加方法，获取最大页码的页码总页码%页码大小，能被整除的情况下返回被整除的结果。否则就在返回的结果加1 需要添加方法：获取上一页的页码如果当前页大于1的情况下当前页-1，否则就为当前页 需要添加方法：获取下一页的页码如果当前页码小于最大页码数时当前页码就+1，
CSS中样式 display 属性 inline，block及inline-block
z69183787的专栏
10-22 1万+
div 元素默认display属性为block 为块状元素，无论div中文字字数，总以块状显示，即占满浏览器宽度。 测试测试 sss 而span元素默认display属性为inline，只占据span中所占字数的宽度。 测试测试 测试测试 inline-block sfffs sfffs inli
CSS中display属性：block、inline和inline-block的区别
热门推荐
aty
02-28 1万+
设置span的高度和宽度无效,span的margin和padding无效
HTML块元素Block要如何定义
大话程序员
08-23 3080
看到，这样的语法，很无力，这算是定义吗？，这只是解释预言啊，我们要怎么定义才能用？ 编程预言很多是依赖倒转的，很多人说这就是定义，我不敢苟同 <head> {% block style %}{% endblock %} <!-- 需要在头部加载 js --> {% block headScript %}{% endblock %} </head> 即使很多专家教授都说，这是定义，但我就是不能用啊，管你什么定不定义 我们首先要了解，所有的html元素，
jsp不限层次继承页面----rapid
zghwaicsdn的专栏
11-02 4925
在开发jsp页面时，有很多网页使用的部分页面结构相同，这些相同的页面结构不仅添加时每个页面都要添加，而且如果要修改这些相同的地方都要修改，给开发及维护带来了工作量。 通过面向对象的问题思考问题：如果相同的部分抽离出来，使用继承的关系，基本的有父类定义，子类可以重写父类的变化的内容。父类可以有多个子类，子类只有一个父类，子类可以有很多子类，这样多层次的继承，可以解决以上问题。   对于页面也是一
Inline-block没有内容时，仍有高度
u010552788的专栏
07-18 2457
如下图，第二个line-block的span没有内容，但是div的高度是120px demo: https://codepen.io/GitKou/pen/qNxNxj<div> <span class="a">111</span> <span class="b"></span> </div>div { font-size: 20px; line-height: 60px; b
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值