кнопки css: заставляет их автоматически изменять размер - PullRequest
Новая
       6

кнопки css: заставляет их автоматически изменять размер

3 голосов
/ 29 января 2010

у меня есть эти кнопки в верхней части страницы:

ДОМ, ПОКУПКА НЕДВИЖИМОСТИ, ПРОДАЖА НЕДВИЖИМОСТИ, ИНФОРМАЦИЯ ОБЩЕСТВА И Т.Д. ..

  1. Мне бы хотелось, чтобы, когда я добавлял больше кнопок, они автоматически изменяли свой размер, и мне не приходилось изменять размер каждой отдельной.

  2. также я бы хотел, чтобы они заняли весь верхний бар

вот код 

#cssmenu_moo_menu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-attachment:scroll;
background-color:#006198;
background-image:url(../images/moomenu.png);
background-position:50% top;
background-repeat:repeat-x;
float:left;
height:35px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}

Мне интересно, может ли следующее ответить на мой вопрос?

Горизонтальная навигация по CSS, кнопки динамической ширины, ширина 100%, фоновые изображения

Ответы [ 3 ]

4 голосов
/ 29 января 2010

Некоторые люди могут жаловаться, но таблица автоматически подберет для вас размер. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Hi</title>
  </head>
  <body>
    <table style="width:100%;">
      <tr>
        <td><input type="button" value="Pick Me 1" style="width:100%;" /></td>
        <td><input type="button" value="Pick Me 2" style="width:100%;" /></td>
        <td><input type="button" value="Pick Me 3" style="width:100%;" /></td>
      </tr>
    </table>
  </body>
</html>

Просто добавьте новый элемент данных таблицы для каждой новой кнопки.

3 голосов
/ 29 января 2010

Это невозможно с чистым CSS (семантическим и кросс-браузерно-совместимым образом, таким образом, оставляя соответственно <table> и display: table; снаружи).Вам нужно будет добавить немного JavaScript ( jQuery ?), Что, однако, содержит предостережение о том, что это может привести к "wtf?"опыт может показаться, что конечный пользователь может видеть размеры элементов (или кнопок, как вы их называете), изменяемые на лету во время загрузки страницы.удалить предмет.Жить с этим.

0 голосов
/ 29 января 2010 
<ul id="menu" class="clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">Buying Property</a></li>
    <li><a href="#">Selling Property</a></li>
    <li><a href="#">Community Info</a></li>
</ul>

CSS: 

ul#menu {
    list-style-type: none;
}

ul#menu li {
    float: left;
    margin-right: 1em;
    display: block;
}

ul#menu li a {
    padding: .2em;
    background: #CCC;
    /* etc */
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

EDIT:

Поскольку решения для чистого CSS не существует, было бы лучше перебрать пункты меню с помощью PHP: 

$pages = array('Page 1' => 'page1.php', 'Page 2' => 'page2.php');
$numPages = count($pages);
$width = ceil(99/$numPages); // 99% is the maximum width, 100% could cause some problems with the last menu item
foreach($pages as $title => $link){
    echo '<li style="width: ' . $width . '"><a href="' . $link . '">' . $title . '</a></li>';
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...