В моем веб-приложении MVC4 у меня есть две кнопки, которые я хочу отображать рядом друг с другом. Один используется для отправки формы на сервер, а другая кнопка используется для создания запроса GET (так что в основном ссылка с разметкой кнопки).
Проблема в том, что теперь они отображаются на разных высотах inline (хотя оба они используют один и тот же CSS) по неизвестной причине.
Это визуальное представление в FireFox проблемы:
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 В соответствии с запросом: см. Этот скрипт для демонстрации.
Различные браузеры устанавливают разные правила CSS по умолчанию в браузерах, известных как таблица стилей пользовательского агента.
Здесь в вашем коде:
ul
в контейнере validation-summary-valid
имеет margin
пользователя по умолчанию. Таким образом, сброс ul
margin
до 0
.
.validation-summary-valid ul {
margin:0;
}
Или вы можете сбросить все стили пользовательского агента, включив reset.css или normalise.css (Google любой из них и найти).
Попробуйте это. <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>