Я хочу, чтобы моя кнопка находилась в определенной части моей веб-страницы

У меня есть 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&amp;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:&quot;j_idt32:j_idt36:0:j_idt40&quot;});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&amp;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:&quot;j_idt32:j_idt36:1:j_idt40&quot;});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&amp;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:&quot;j_idt32:j_idt36:2:j_idt40&quot;});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&amp;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:&quot;j_idt32:j_idt36:3:j_idt40&quot;});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&amp;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:&quot;j_idt32:j_idt36:4:j_idt40&quot;});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&amp;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:&quot;j_idt32:j_idt36:5:j_idt40&quot;});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

||||||||||||||||||||||||||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||||||||

Вы можете предоставить сгенерированный html ..? используя источник просмотра..

— 01.02.2019 08:10

@Нико попробуй этот justify-content:flex-end'

— 01.02.2019 08:28

html css

01.02.2019 08:05

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используйте эту структуру кода, я думаю, это поможет вам.

.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&amp;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:&quot;j_idt32:j_idt36:0:j_idt40&quot;});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&amp;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:&quot;j_idt32:j_idt36:1:j_idt40&quot;});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>

Спасибо :) Не могли бы вы кратко объяснить, что вы сделали?

— 01.02.2019 08:25

Я обновил обе кнопки в новом div, а также удалил поле первой кнопки.

— 01.02.2019 08:31

На самом деле, есть проблема со структурой HTML, так как внутри <ul> должен быть <li>, а не <div>

— 01.02.2019 08:33

01.02.2019 08:24

Ответ принят как подходящий

Это то, что тебе надо? Кстати, в структуре вашего 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>

Извините, но я так не думаю, когда левый текст увеличивается, он упадет в правильном направлении. Я попробовал ваш код, это приведет к проблеме при увеличении левого текста, попробуйте сами.

— 01.02.2019 09:14

01.02.2019 08:32