Вертикальное выравнивание кнопки отправки и ссылки с разметкой кнопки

0

В моем веб-приложении MVC4 у меня есть две кнопки, которые я хочу отображать рядом друг с другом. Один используется для отправки формы на сервер, а другая кнопка используется для создания запроса GET (так что в основном ссылка с разметкой кнопки).

Проблема в том, что теперь они отображаются на разных высотах inline (хотя оба они используют один и тот же CSS) по неизвестной причине.

Это визуальное представление в FireFox проблемы:

Изображение 174551

HTML с Razor выглядит следующим образом:

<td align="right">
    <!-- LEFT POST BUTTON -->
    @using (Html.BeginForm("SettleWithSalary", "Transaction"))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()

        @Html.HiddenFor(id => item.UserId)
        @Html.HiddenFor(balance => item.Total)

        <button type="submit" class="btn btn-green">Settle</button>
    }
</td>
<td>| <!--RIGHT GET BUTTON-->
    @Html.ActionLink("Details", "Overview", "Transaction",
            new { id = item.UserId }, new { @class = "btn btn-green" })
</td>

И получившийся HTML-код в браузере выглядит следующим образом:

<td align="right">
<form action="/Transaction/SettleWithSalary" method="post">
    <input name="__RequestVerificationToken" type="hidden" value="***blabla" />
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul>
            <li style="display:none"></li>
        </ul>
    </div>

    <!-- Two hidden fields with lots of information -->                     

    <button type="submit" class="btn btn-green">Settle</button>

</form>                
</td>
<td> |

    <a class="btn btn-green" href="/Transaction/Overview/2">Details</a>

</td>

Я хочу, чтобы кнопка Settle была выровнена по вертикали с помощью кнопки Details. Я попытался поместить div со style="float: none; vertical-align: top вокруг элемента кнопки, который не работает. Также добавив style="position: absolute;" кнопка просто отображает их поверх друг друга с помощью кнопка Settle ниже кнопки Details. Короче говоря, я не знаю, как это решить.

Кто-нибудь знает, почему они отображаются на разных высотах и как это можно решить?

/EDIT В соответствии с запросом: см. Этот скрипт для демонстрации.

  • 1
    Пожалуйста, покажите живой пример (jsfiddle.net), включая форматирование, которое вы применяете к этому.
  • 0
    Кнопка "Settle" находится внутри элемента формы. По умолчанию элементы формы имеют верхнее поле, поэтому вам придется его удалить. Или вы можете установить отрицательное верхнее поле на кнопку.
Показать ещё 3 комментария
Теги:
razor
asp.net-mvc-4

2 ответа

1
Лучший ответ

Различные браузеры устанавливают разные правила CSS по умолчанию в браузерах, известных как таблица стилей пользовательского агента.

Здесь в вашем коде:

ul в контейнере validation-summary-valid имеет margin пользователя по умолчанию. Таким образом, сброс ul margin до 0.

    .validation-summary-valid ul {
       margin:0;
     }

Или вы можете сбросить все стили пользовательского агента, включив reset.css или normalise.css (Google любой из них и найти).

  • 0
    ОТЛИЧНО! Это работает как шарм.
0

Попробуйте это. <form> <table cellpadding="10" cellspacing="0" border="0"> <tr> <td colspan="2"><input name="__RequestVerificationToken" type="hidden" value="***blabla"/> <div class="validation-summary-valid" data-valmsg-summary="true"> <ul> <li style="display:none"></li> </ul> </div> <!-- Two hidden fields with lots of information --> </td> </tr> <tr> <td style="border-right=1px solid #000000;"><button type="submit" class="btn btn-green">Settle</button></td> <td><a class="btn btn-green" href="/Transaction/Overview/2">Details</a></td> </tr> </table> </form>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню