css - 如何使p:旋转木马元素适合旋转木马的宽度和高度？

我在p:outputLabel中有一个p:caroussel，它应显示其右边框以匹配caroussel，即在400px x 200px框架的外部：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:panelGroup style="width: 400px; float: left;" layout="block">
        <p:carousel>
        <p:outputLabel value="No preview available" style="width: 100%; height: 200px; display: block;"/>
        </p:carousel>
        </h:panelGroup>
    </h:body>
</html>

它在50px x 200px的莫名其妙帧周围显示边框：

MVCE位于https://github.com/krichter722/jsf-width-and-height-on-outputlabel。

我正在使用Primefaces 6.0。

最佳答案

解决方案非常简单。不必费心尝试使用CSS来破解它，而是在numVisible上将1属性设置为p:carousel。

这为我工作：

<h:panelGroup style="width: 400px; float: left;" layout="block">
  <p:carousel numVisible="1" itemStyle="height: 200px;">
    <h:outputText value="No preview available"/>
  </p:carousel>
</h:panelGroup>

另请注意，您可以使用itemStyle设置项目的高度（如果需要固定高度）。

...不要在意光标;-)

关于css - 如何使p:旋转木马元素适合旋转木马的宽度和高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43710203/