[Помогите] Простая мелочь с кнопками (css)

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем xoff, 17 окт 2013.

  1. xoff

    xoff

    Регистрация:
    2 сен 2013
    Сообщения:
    72
    Симпатии:
    13
    Надо сделать что бы кнопки были одной ширины независимо от текста, да может я не правильно начал делать кнопки через украшения ссылок просто тоесть у меня html имеет вид: <a class="new_botton" href=итд....>, но я думаю и при такой реализации можно сделать одной шириной. Пробовал width не работает) Помогите реализовать... Песочница: http://jsfiddle.net/gTb84/

    css:
    Код:
    .new_botton {
      color: #000000;
      text-decoration: none;
      background-color: #97C3FC;
      padding: 7px 30px;
      border: 1px solid #7E7676;
      -webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
      line-height: 24px;
      text-shadow: #A5A5A5 0px 1px 0px;
    }
    .new_botton:hover {
      background: #8B9DFA;
    }
    
    [​IMG]
     
  2. Savok32

    Savok32

    Регистрация:
    18 дек 2012
    Сообщения:
    331
    Симпатии:
    51
    может так
    <div class="new_botton"><a href="#">Тест</a></div>
    <div class="new_botton"><a href="#">ТестМногомного</a></div>





    .new_botton {
    width:200px;
    color: #000000;
    text-decoration: none;
    background-color: #97C3FC;
    padding: 7px 30px;
    border: 1px solid #7E7676;
    -webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
    line-height: 24px;
    text-shadow: #A5A5A5 0px 1px 0px;
    }
    .new_botton:hover {
    background: #8B9DFA;
    }
    --- Добавлено, 17 окт 2013 ---
    или так
    <a class="new_botton" href="#">Тест</a>
    <a class="new_botton" href="#">ТестМногомного</a>


    .new_botton {
    display:block;
    width:200px;
    color: #000000;
    text-decoration: none;
    background-color: #97C3FC;
    padding: 7px 30px;
    border: 1px solid #7E7676;
    -webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
    line-height: 24px;
    text-shadow: #A5A5A5 0px 1px 0px;
    }
    .new_botton:hover {
    background: #8B9DFA;
    }
     
    xoff нравится это.
  3. Stiloff

    Stiloff

    Регистрация:
    7 фев 2013
    Сообщения:
    11
    Симпатии:
    22
    width работает только для блочных элементов, если это <a> тэг, надо его переопределить в стиле как блочный, тобишь a.button {display:block;}
     
  4. 2xDiP

    2xDiP

    Регистрация:
    20 окт 2013
    Сообщения:
    26
    Симпатии:
    1
    http://jsfiddle.net/gTb84/31/

    Не знаю, помогу или нет, но вроде и так уже навели на правильный путь.
     
  5. Маэстро

    Маэстро

    Регистрация:
    1 ноя 2013
    Сообщения:
    10
    Симпатии:
    2
    width прекрасно работает с display: inline-block; :Smile: Это решает проблему
     
    yoda4 нравится это.