我希望按钮位于网页的特定部分
我在CommandButton中有一个UI:Repeat，并且我一直希望该按钮位于条目后面的同一位置。
目前看起来像这样
但是我希望绿色和红色按钮在垂直的垂直方向发光！
<ui:repeat value="#{zipCodeListView.getAllZipCodeDTO()}" var="allZipCodeDTO">
<div class="flex-horizontal">
<div><p> #{allZipCodeDTO.favouriteZipCode}, #{allZipCodeDTO.cityName} </p></div>
<!-- Button für das Löschen des Eintrags -->
<div> <p:link value="Bearbeiten" styleClass="btn-success btn-block widthAuto"
style="margin-bottom: 10px; margin-top: 10px ;" icon="fa fa-refresh"
includeViewParams="true"
outcome="edit">
<f:param name="id" value="#{allZipCodeDTO.id}"/></p:link></div>
<div> <p:commandButton styleClass="btn-danger fixed-button-edit" value="Löschen" icon="fa fa-close"
immediate="true"
action="#{zipCodeView.deleteEntry(allZipCodeDTO)}"/></div></div>
</ui:repeat>
我的CSS
.flex-horizontal {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
另一个CSS是来自primefaces皮肤！
<ul class="box margin-top-left">
<div class="flex-horizontal">
<div><p> 85049, Ingolstadt </p></div>
<div><a href="/zipcode/edit.xhtml?id=1005&jfwid=EC7AF8F994C189FA9CBCA53840270782:0" class="ui-link ui-widget btn-success btn-block widthAuto" style="margin-bottom: 10px; margin-top: 10px ;">Bearbeiten</a></div>
<div><button id="j_idt32:j_idt36:0:j_idt40" name="j_idt32:j_idt36:0:j_idt40" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left btn-danger fixed-button-edit" onclick="PrimeFaces.ab({s:"j_idt32:j_idt36:0:j_idt40"});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c fa fa-close"></span><span class="ui-button-text ui-c">Löschen</span></button></div></div>
<div class="flex-horizontal">
<div><p> 85000, München </p></div>
<div><a href="/zipcode/edit.xhtml?id=1002&jfwid=EC7AF8F994C189FA9CBCA53840270782:0" class="ui-link ui-widget btn-success btn-block widthAuto" style="margin-bottom: 10px; margin-top: 10px ;">Bearbeiten</a></div>
<div><button id="j_idt32:j_idt36:1:j_idt40" name="j_idt32:j_idt36:1:j_idt40" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left btn-danger fixed-button-edit" onclick="PrimeFaces.ab({s:"j_idt32:j_idt36:1:j_idt40"});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c fa fa-close"></span><span class="ui-button-text ui-c">Löschen</span></button></div></div>
<div class="flex-horizontal">
<div><p> 12333, Hallo Noii </p></div>
<div><a href="/zipcode/edit.xhtml?id=1024&jfwid=EC7AF8F994C189FA9CBCA53840270782:0" class="ui-link ui-widget btn-success btn-block widthAuto" style="margin-bottom: 10px; margin-top: 10px ;">Bearbeiten</a></div>
<div><button id="j_idt32:j_idt36:2:j_idt40" name="j_idt32:j_idt36:2:j_idt40" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left btn-danger fixed-button-edit" onclick="PrimeFaces.ab({s:"j_idt32:j_idt36:2:j_idt40"});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c fa fa-close"></span><span class="ui-button-text ui-c">Löschen</span></button></div></div>
<div class="flex-horizontal">
<div><p> 89458, 789 </p></div>
<div><a href="/zipcode/edit.xhtml?id=1021&jfwid=EC7AF8F994C189FA9CBCA53840270782:0" class="ui-link ui-widget btn-success btn-block widthAuto" style="margin-bottom: 10px; margin-top: 10px ;">Bearbeiten</a></div>
<div><button id="j_idt32:j_idt36:3:j_idt40" name="j_idt32:j_idt36:3:j_idt40" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left btn-danger fixed-button-edit" onclick="PrimeFaces.ab({s:"j_idt32:j_idt36:3:j_idt40"});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c fa fa-close"></span><span class="ui-button-text ui-c">Löschen</span></button></div></div>
<div class="flex-horizontal">
<div><p> 78945, 4 </p></div>
<div><a href="/zipcode/edit.xhtml?id=1022&jfwid=EC7AF8F994C189FA9CBCA53840270782:0" class="ui-link ui-widget btn-success btn-block widthAuto" style="margin-bottom: 10px; margin-top: 10px ;">Bearbeiten</a></div>
<div><button id="j_idt32:j_idt36:4:j_idt40" name="j_idt32:j_idt36:4:j_idt40" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left btn-danger fixed-button-edit" onclick="PrimeFaces.ab({s:"j_idt32:j_idt36:4:j_idt40"});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c fa fa-close"></span><span class="ui-button-text ui-c">Löschen</span></button></div></div>
<div class="flex-horizontal">
<div><p> 12345, 1111111111107 </p></div>
<div><a href="/zipcode/edit.xhtml?id=1023&jfwid=EC7AF8F994C189FA9CBCA53840270782:0" class="ui-link ui-widget btn-success btn-block widthAuto" style="margin-bottom: 10px; margin-top: 10px ;">Bearbeiten</a></div>
<div><button id="j_idt32:j_idt36:5:j_idt40" name="j_idt32:j_idt36:5:j_idt40" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left btn-danger fixed-button-edit" onclick="PrimeFaces.ab({s:"j_idt32:j_idt36:5:j_idt40"});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c fa fa-close"></span><span class="ui-button-text ui-c">Löschen</span></button></div></div>
</ul>
生成的HTML
||||||||||||||||||||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||
2 个答案:
答案 0 :(得分：1)
使用此代码结构，我认为这会对您有所帮助。
.flex-horizontal {
display: flex;
display: -webkit-flex;
max-width: 600px;
}
.button-box {
display: flex;
display: -webkit-flex;
margin-left: auto;
}
a.ui-link.ui-widget {
padding: 3px;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
</head>
<body>
<ul class="box margin-top-left">
<div class="flex-horizontal">
<div><p> 85049, Ingolstadt </p></div>
<div class="button-box">
<div><a href="/zipcode/edit.xhtml?id=1005&jfwid=EC7AF8F994C189FA9CBCA53840270782:0" class="ui-link ui-widget btn-success btn-block widthAuto" style="">Bearbeiten</a></div>
<div><button id="j_idt32:j_idt36:0:j_idt40" name="j_idt32:j_idt36:0:j_idt40" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left btn-danger fixed-button-edit" onclick="PrimeFaces.ab({s:"j_idt32:j_idt36:0:j_idt40"});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c fa fa-close"></span><span class="ui-button-text ui-c">Löschen</span></button></div>
</div>
</div>
<div class="flex-horizontal">
<div><p> 85000, Münchensd sd fsdfsdfsdfsdf </p></div>
<div class="button-box">
<div><a href="/zipcode/edit.xhtml?id=1002&jfwid=EC7AF8F994C189FA9CBCA53840270782:0" class="ui-link ui-widget btn-success btn-block widthAuto" style="">Bearbeiten</a></div>
<div><button id="j_idt32:j_idt36:1:j_idt40" name="j_idt32:j_idt36:1:j_idt40" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left btn-danger fixed-button-edit" onclick="PrimeFaces.ab({s:"j_idt32:j_idt36:1:j_idt40"});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c fa fa-close"></span><span class="ui-button-text ui-c">Löschen</span></button></div>
</div>
</div>
</ul>
</body>
</html>
答案 1 :(得分：1)
这是您需要的吗？
顺便说一下，您HTML的结构存在问题，因为<ul>内部必须为<li>，在下面的示例代码中，您可以根据设计来更改width中的.r1, .r2, .r3, .bt1, .bt2
ul{
max-width: 700px;
}
.r1{
width: 30%;
display: inline-block;
}
.r2, .r3{
width: 10%;
display: inline-block;
}
.bt1{
background-color: green;
}
.bt2{
background-color: red;
}<ul>
<li>
<div class="r1">Row 1</div>
<div class="r2"><button class="bt1">1 Row 1</button></div>
<div class="r3"><button class="bt2">2 Row 1</button></div>
</li>
<li>
<div class="r1">Example Row 2</div>
<div class="r2"><button class="bt1">1 Row 1</button></div>
<div class="r3"><button class="bt2">2 Row 1</button></div>
</li>
<li>
<div class="r1">A Long text</div>
<div class="r2"><button class="bt1">1 Row 1</button></div>
<div class="r3"><button class="bt2">2 Row 1</button></div>
</li>
<li>
<div class="r1">Row i don't</div>
<div class="r2"><button class="bt1">1 Row 1</button></div>
<div class="r3"><button class="bt2">2 Row 1</button></div>
</li>
<li>
<div class="r1">Row test</div>
<div class="r2"><button class="bt1">1 Row 1</button></div>
<div class="r3"><button class="bt2">2 Row 1</button></div>
</li>
<li>
<div class="r1">Row 1</div>
<div class="r2"><button class="bt1">1 Row 1</button></div>
<div class="r3"><button class="bt2">2 Row 1</button></div>
</li>
</ul>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？