JSP 中的 CSS 样式答案

【问题标题】：CSS Style in JSPJSP 中的 CSS 样式
【发布时间】：2017-11-07 14:18:48
【问题描述】：

我有一个 JAVA EE 应用程序。部署在我有这个 JSP 的 Tomcat 7 中，我想将样式应用于页脚以使文本居中，因此我在 JSP 中定义了要在页脚 DIV 中应用的样式

<%@ page import="com.telefonica.movistar.vo.UserVO" %>
<%@ page import="com.telefonica.movistar.dao.MonitorProcessDAO" %>
<%@ page import="com.telefonica.movistar.vo.MonitorProcessVO" %>
<%@ page import="java.util.ArrayList" %>

<style>
.layout-footer {
    border-width: 1px 0;
    justify-content: center
}
</style>

<%
  MonitorProcessDAO dao = new MonitorProcessDAO();

  String action = request.getParameter("action");
  String reference = request.getParameter("reference");

  if ("keepalive".equals(action)) {
    dao.keepAlive(reference);
  } else
  if ("setmetrics".equals(action)) {
    String metric1 = request.getParameter("metric1");
    String metric2 = request.getParameter("metric2");
    String metric3 = request.getParameter("metric3");
    dao.setMetrics(reference, metric1, metric2, metric3);
  } else
  if ("reporterror".equals(action)) {
      String message = request.getParameter("message");
    dao.reportError(reference, message);
  } else {
%>
<%@ page contentType="text/html" pageEncoding="windows-1252"%>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../mobile/mobileWS.css" media="screen" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" name="MobileOptimized">
    <title>Process Monitoring</title>
  </head>
  <body>
    <p><b>Now:</b> <%=(new java.util.Date())%></p>
    <table>
    <tr bgcolor="#E0E0E0">
      <td><b>Reference</b></td>
      <td><b>KeepaliveDate</b></td>
      <td><b>Metric1</b></td>
      <td><b>Metric2</b></td>
      <td><b>Metric3</b></td>
      <td width="100%">&nbsp;</td>
    </tr>

<%
  ArrayList list = dao.list(null);
  for (int i=0;(list!=null)&&(i<list.size());i++) {
    MonitorProcessVO vo = (MonitorProcessVO)list.get(i);

    String bgcolor= ((i%2)!=0) ? "#F0F0F0" : "#FFFFFF";
%>
    <tr bgcolor="<%=bgcolor%>">
      <td nowrap><%=vo.getReference()%></td>
      <td nowrap><%=vo.getKeepaliveDate()%></td>
      <td nowrap><%=vo.getMetric1Value()%></td>
      <td nowrap><%=vo.getMetric2Value()%></td>
      <td nowrap><%=vo.getMetric3Value()%></td>
    </tr>
<%
  }
%>    
    </table>
    <br/>
    <table>
    <tr bgcolor="#E0E0E0">
      <td><b>Reference</b></td>
      <td><b>ErrorDate</b></td>
      <td width="100%"><b>Message</b></td>
    </tr>

<%
  list = dao.listError(null);
  for (int i=0;(list!=null)&&(i<list.size());i++) {
    MonitorProcessVO vo = (MonitorProcessVO)list.get(i);

    String bgcolor= ((i%2)!=0) ? "#F0F0F0" : "#FFFFFF";
%>
    <tr bgcolor="<%=bgcolor%>">
      <td nowrap><%=vo.getReference()%></td>
      <td nowrap><%=vo.getErrorDate()%></td>
      <td nowrap><%=vo.getErrorMessage()%></td>
    </tr>
<%
  }
%>    
    </table>
    <br/>
    <table>
    <tr bgcolor="#E0E0E0">
      <td width="100%"><b>Daily Reports</b></td>
    </tr>
    <tr bgcolor="#F0F0F0">
      <td nowrap><a href="../reports/generic_html.jsp?guiUserId=10191&reportId=973&view=V_RPT_SAV_TELEFONO_STATUS">Aggregation Logs</a></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td nowrap><a href="../reports/generic_html.jsp?guiUserId=191001&reportId=83&view=V_ABONADOS_MONITORING_DAY">Aggregation Monitoring</a></td>
    </tr>
    </table>

    <div class="layout-footer" style="align">
        <br/><br/>
        Build 1.0.0  -  (07/11/2017)  &nbsp;&nbsp;|&nbsp;&nbsp; &copy; Telefonica 2017
    </div>


  </body>
</html>
<% 
  } 
%>

但页脚没有应用样式，我看到所有浏览器的文本都向左对齐L IE、chrome 和 Firefox

【问题讨论】：

您不应该将 scriptlet 代码放入 JSP 中。如果您必须继续使用 JSP，请学习 JSTL。您也不应该以这种方式在页面中嵌入 CSS。将其外化。

标签： java html css jsp

【解决方案1】：

您似乎缺少 display: flex 部分。否则 justify-content 将不起作用。

.layout-footer {
    display: flex;
    justify-content: center; 
}

【讨论】：