#html #css
#HTML #css
Вопрос:
У меня проблема с HTML-страницей. Я создал кнопки CSS и разместил их внутри divs (строк), поведение которых должно действовать как таблица. Я хочу, чтобы размер каждой кнопки составлял, скажем, 60% от высоты и ширины «ячеек» div. Однако они всегда заполняют пространство до максимального размера.
Вот моя скрипка.
И вот мой CSS-код:
html,body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: blue;
text-align: center;
}
.container
{
display: table;
width: 80%;
height: 70%;
position: relative;
background: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
display: inline-block;
overflow: hidden;
}
.row
{
width: 99%;
height: 33%;
//display: table;
display: table-row;
table-layout: fixed;
position: relative;
float: left;
}
.row span
{
width: 100%;
height: 100%;
display: table;
}
.row span a
{
display: table-cell;
width: 33%;
vertical-align: middle;
}
.button
{
width: 60%;
height: 60%;
-moz-box-shadow: inset 0px 1px 0px 0px orange;
-webkit-box-shadow: inset 0px 1px 0px 0px orange;
box-shadow: inset 0px 1px 0px 0px orange;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='orange',GradientType=0);
background-color: orange;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
cursor: pointer;
color: black;
font-size: 100%;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px orange;
}
.button:hover
{
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#dfbf91', endColorstr='#dfd691',GradientType=0);
background-color: yellow;
}
.button:active
{
position: relative;
top: 1px;
}
Я застрял в поисках решения проблемы, поэтому буду признателен за любую помощь!
Комментарии:
1. Ваше объяснение ожидаемого поведения неясно. Можете ли вы уточнить?
2. DIVS образуют таблицу с 3 строками и 3 ячейками, верно? Внутри этих «ячеек» у меня есть только кнопки ссылок. Я хочу, чтобы каждая кнопка имела 60% размера высоты и ширины соответствующей ячейки. В противном случае ссылки не имеют пробелов вокруг них. Ни сверху / снизу, ни слева / справа. Вот почему я подумал, что значение 60% изменит размер каждой кнопки. Надеюсь, теперь это более понятно 🙂
Ответ №1:
Это то, что вы ищете:
Просто добавьте медиа-запрос в css…. Я добавил пример ниже…
html,body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: blue;
text-align: center;
}
.container
{
display: table;
width: 80%;
height: 70%;
position: relative;
background: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
display: inline-block;
overflow: hidden;
}
.row
{
width: 99%;
height: 30%;
//display: table;
display: table-row;
table-layout: fixed;
position: relative;
float: left;
margin-top: 5px;
}
.row span
{
width: 100%;
height: 100%;
padding-top:5%;
}
.row span a {
display: inline-block;
vertical-align: middle;
width: 25%;
margin: 3%;
}
.button
{
width: 40%;
height: 40%;
-moz-box-shadow: inset 0px 1px 0px 0px orange;
-webkit-box-shadow: inset 0px 1px 0px 0px orange;
box-shadow: inset 0px 1px 0px 0px orange;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='orange',GradientType=0);
background-color: orange;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
cursor: pointer;
color: black;
font-size: 100%;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px orange;
}
@media all and (max-width: 480px)
{
.button
{
width: 40%;
height: 40%;
-moz-box-shadow: inset 0px 1px 0px 0px orange;
-webkit-box-shadow: inset 0px 1px 0px 0px orange;
box-shadow: inset 0px 1px 0px 0px orange;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='orange',GradientType=0);
background-color: orange;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
cursor: pointer;
color: black;
font-size: 60%;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px orange;
overflow: hidden;
text-overflow: ellipsis;
}
}
.button:hover
{
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#dfbf91', endColorstr='#dfd691',GradientType=0);
background-color: yellow;
}
.button:active
{
position: relative;
top: 1px;
}
Комментарии:
1. Спасибо за ответ! Это дает мне только 60% высоты. Я также хочу, чтобы ширина каждой кнопки составляла 60%.
2. Этот CSS — это то, что вы ищете.
3. Это именно то, что я искал! У меня есть только еще один запрос. Это работает как шарм, когда текст в кнопке короткий. Однако, если у меня более длинный текст, он будет отображаться за пределами кнопки при изменении размера окна. Не могли бы вы дать мне исправление и для этого? Я отмечу ваш ответ как правильный.
Ответ №2:
Измените свойство row.span в вашем css, оно установлено на 100%
Ответ №3:
HTML
<body>
<div id="buttonPanel" class="container">
<div id="row1" class="row">
<a href="#" class="button">Link 1</a>
<a href="#" class="button">Link 2</a>
<a href="#" class="button">Link 3</a>
</div>
<div id="row2" class="row">
<a href="#" class="button">Link 4</a>
<a href="#" class="button">Link 5</a>
<a href="#" class="button">Link 6</a>
</div>
<div id="row3" class="row">
<a href="#" class="button">Link 7</a>
<a href="#" class="button">Link 8</a>
<a href="#" class="button">Link 9</a>
</div>
</div>
</body>
CSS
html,body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: blue;
text-align: center;
}
.container
{
display: table;
width: 80%;
height: 70%;
position: relative;
background: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
display: inline-block;
overflow: hidden;
}
.row
{
width: 100%;
height: 36%;
}
.row span
{
width: 100%;
height: 100%;
display: table;
}
.row a
{
display: inline-block;
/* vertical-align: middle; */
width: 32.7%;
height: 70%;
vertical-align: sub;
margin: 0px;
}
.button
{
width: 60%;
height: 60%;
-moz-box-shadow: inset 0px 1px 0px 0px orange;
-webkit-box-shadow: inset 0px 1px 0px 0px orange;
box-shadow: inset 0px 1px 0px 0px orange;
background-color: orange;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
cursor: pointer;
color: black;
font-size: 100%;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px orange;
}
.button:hover
{
background-color: yellow;
}
.button:active
{
position: relative;
top: 1px;
}