我正在开发一个网页，首页在可调整大小的表单中显示一个菜单(全部使用 PrimeFace)。
<p:layoutUnit position="west" size="315" minSize="180" maxSize="315" resizable="true" >
<ui:include src="/menu.xhtml" />
</p:layoutUnit>
从其布局来看，父表单显示的边框(“外边框”)与菜单自身的边框(“内边框”)非常相似。
我想让内边框相对于外边框有一个固定的距离，尤其是它的右侧，类似于上图。通常菜单的边框不会延伸到他父级的边框:
当然，如果外边框具有固定大小，我可以很容易地做到这一点:将菜单的边框设置为固定宽度。问题是右侧的外边框可以调整大小，所以我需要内边框可以调整大小，同时始终与外边框保持相同的距离。
我试过用百分比值设置宽度，但它不起作用:当调整外边框大小时，距离会被压缩或扩展。基于其他SO问题，我也尝试在其中输入一个固定的 margin :
<p:menu toggleable="true" style="margin-right: 1px;" >
但是命令被忽略了。 box-sizing: border-box; 也没有用，right: 1px; 也没有用，所以使用 resize。那我该怎么做呢？
这是菜单代码的第一部分:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<script type="text/javascript">//<![CDATA[
SO: irrelevant code here
//]]>
</script>
<h:form id="id_menu" >
<p:menu toggleable="true" >
<p:submenu label="Monitoramento" expanded="false" >
最佳答案
尝试像这样将菜单 div 的宽度设置为自动:
<h:body>
<style type="text/css">
.ui-menu.menu-west {
width: auto;
}
</style>
<p:layout>
<p:layoutUnit position="west" size="315" minSize="180" maxSize="315" resizable="true">
<h:form id="id_menu">
<p:menu toggleable="true" styleClass="menu-west">
<p:submenu label="Monitoramento" expanded="false">
<p:menuitem value="Extrem long"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
Content
</p:layoutUnit>
</p:layout>
</h:body>
如果您有需要，您可以设置所有四个边上的边框之间的填充相等:
.ui-layout-unit .ui-layout-unit-content {
padding: 5px;
}
关于javascript - CSS:如何使内边框相对于可调整大小的父边框有固定的距离？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48500933/