Question

我正在开发一个网页，首页在可调整大小的表单中显示一个菜单（全部使用PrimeFace）。

<p:layoutUnit position="west" size="315" minSize="180" maxSize="315" resizable="true" >
    <ui:include src="/menu.xhtml"  />
</p:layoutUnit>

从其布局中，父窗体显示边框（＆＃34;外边框＆＃34;）非常类似于菜单自己的边框（＆＃34;内边框＆＃34;）。

我希望内边框相对于外边框有一个固定的距离，特别是它的右边，类似于上图。通常情况下，菜单的边框不会延伸到父母的边界：

当然，如果外边框的大小固定，我可以很容易地做到这一点：设置菜单边框的固定宽度。问题是外边框可以在右侧调整大小，所以我需要内部边框可以调整大小，并且始终与外边框保持相同的距离。

我尝试用百分比值设置宽度，但它没有＆＃39; work：调整外边框大小时压缩或扩展距离。基于其他SO问题，我也尝试输入一个固定的过程：

<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" >

Answer 1

尝试将菜单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;
}

CSS：如何使内边框相对于可调整大小的父边框具有固定距离？

1 个答案: