Создание тем для MVC3 ActionLink, чтобы все ссылки имели одинаковую ширину - PullRequest
Новая
       10

Создание тем для MVC3 ActionLink, чтобы все ссылки имели одинаковую ширину

2 голосов
/ 29 февраля 2012

Мы используем сообщения и сообщения, которые из коробки отображаются в виде ссылок (сообщений) и кнопок (сообщений).Чтобы обеспечить приятный и согласованный внешний вид пользовательского интерфейса, мы создали тематические кнопки для всех взаимодействий нажатий пользовательского интерфейса, чтобы они выглядели одинаково с помощью css: 

.minimal
{
   background: #e3e3e3;
   border: 1px solid #bbb;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
   -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
   box-shadow: inset 0 0 1px 1px #f6f6f6;
   color: #333;
   font: bold 12px "helvetica neue" , helvetica, arial, sans-serif;
   padding: 5px 20px 5px 20px;
   text-align: center;
   text-shadow: 0 1px 0 #fff;
   text-decoration: none;
}

.minimal:hover
{
   background: #d9d9d9;
   -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
   -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
   box-shadow: inset 0 0 1px 1px #eaeaea;
   color: #222;
   cursor: pointer;
}

.minimal:active
{
   background: #d0d0d0;
   -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
   -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
   box-shadow: inset 0 0 1px 1px #e3e3e3;
   color: #000;
}

... и использовали этот способ: 

 @Html.ActionLink("Edit", "Edit", new { id = Model.ID }, new {@class = "minimal"})
 <input type="submit" class = "minimal" value="submit" />

Проблема с оператором padding в .minimal, кажется, что в зависимости от длины текста, содержащегося в ActionLink, вы получите более длинную или более короткую кнопку.Я бы использовал тег 'width', но он влияет только на сообщения ... но не на ActionLinks.Кто-нибудь успешно решил эту проблему?

1 Ответ

2 голосов
/ 29 февраля 2012

width работает только на элементах блока.Попробуйте добавить это: 

a.minimal {
    display: inline-block;
    padding: 5px 0;
    width: 198px; /* subtract border */
}

и добавьте ширину к .minimal: 

width: 200px;

(или стиль для ссылок в целом и обрабатывайте кнопку отправки по-особому)

Для лучшей кросс-браузерной совместимости вам также может потребоваться выполнить некоторые хитрости в соответствии с этой (старой) статьей : 

a.minimal {
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    padding: 5px 0;
    width: 198px; /* subtract border */
}

Вам нужно попробовать то, что работает для ваших целевых браузеров,Я попробовал первое (более простое) решение, и оно работает во всех современных браузерах и IE7 + IE8.

...