Вопрос:
Я хотел бы поместить кнопки CSS в несколько таблиц. В идеале каждая кнопка должна заполнить соответствующую ячейку таблицы. Это создает проблему, потому что, если я жестко программирую ширину кнопок в CSS, мне понадобится отдельный класс для каждого измерения таблицы.
Есть ли способ вставить кнопки в ячейки таблицы?
HTML:
<center> <table border=»1″ width=»90%» class=»buttons»> <tr> <td width=»25%»><a href=»http://www.google.com»>Link1 goes here</a></td> <td width=»25%»><a href=»http://www.google.com»>Link2<br>goes<br>here</a></td> <td width=»25%»><a href=»http://www.google.com»>Link3<br>goes<br>here</a></td> <td width=»25%»><a href=»http://www.google.com»>Link4<br>goes<br>here</a></td> </tr> </table> <p> <table border=»1″ width=»90%» class=»buttons»> <tr> <td width=»20%»><a href=»http://www.google.com»>Link1 goes here</a></td> <td width=»20%»><a href=»http://www.google.com»>Link2<br>goes<br>here</a></td> <td width=»20%»><a href=»http://www.google.com»>Link3<br>goes<br>here</a></td> <td width=»20%»><a href=»http://www.google.com»>Link4<br>goes<br>here</a></td> <td width=»20%»><a href=»http://www.google.com»>Link5<br>goes<br>here</a></td> </table> </center>
CSS:
.buttons { overflow:auto; text-align: center; font-size: 1.0em; font-weight: bold; line-height: 200%; } .buttons a { display: inline-block; width: 18em; height: 6em; margin-bottom: 0.5em; padding-top: .6em; padding-bottom: .6em; color: #fff; background-color: #aaabbb; border-radius: 5px; border: solid #cccccc 1px; box-shadow: 2px 2px 1px #888888; clear:right; float:right; } .buttons a:active { box-shadow: 1px 1px 0px #888888; }
Играйте с кодом:
Лучший ответ:
Вы должны попытаться установить высоту и ширину 100%. Как это:
.buttons a { display: inline-block; width: 100%; /* set to 100% */ height: 100%; /* set to 100% */ margin-bottom: 0.5em; padding-top: .6em; padding-bottom: .6em; color: #fff; background-color: #aaabbb; border-radius: 5px; border: solid #cccccc 1px; box-shadow: 2px 2px 1px #888888; clear:right; float:right; } Ответ №1
Старайтесь не вставлять CSS код в HTML… это приводит к беспорядку!
Принимая встроенный стиль из html, кажется, устраняет большинство проблем. Затем, как и @ArmanVirdi, добавьте ширину и высоту ссылки на 100%.
Теги <center>, похоже, ничего не делают, поэтому они удаляются в нижнем HTML, а также тег <p>.
HTML
<table class=»buttons width-25″> <tr> <td><a href=»http://www.google.com»>Link1 goes here</a> </td> <td><a href=»http://www.google.com»>Link2<br>goes<br>here</a> </td> <td><a href=»http://www.google.com»>Link3<br>goes<br>here</a> </td> <td><a href=»http://www.google.com»>Link4<br>goes<br>here</a> </td> </tr> </table> <table class=»buttons width-20″> <tr> <td><a href=»http://www.google.com»>Link1 goes here</a> </td> <td><a href=»http://www.google.com»>Link2<br>goes<br>here</a> </td> <td><a href=»http://www.google.com»>Link3<br>goes<br>here</a> </td> <td><a href=»http://www.google.com»>Link4<br>goes<br>here</a> </td> <td><a href=»http://www.google.com»>Link5<br>goes<br>here</a> </td> </table>
CSS
table { width: 100%; } .width-20 td { width: 20%; } .width-25 td { width: 25%; } .buttons { text-align: center; font-size: 1.0em; font-weight: bold; line-height: 200%; } .buttons a { display: inline-block; height: 100%; width: 100%; margin-bottom: 0.5em; padding-top: .6em; padding-bottom: .6em; color: #fff; background-color: #aaabbb; border-radius: 5px; border: solid #cccccc 1px; box-shadow: 2px 2px 1px #888888; } .buttons a:active { box-shadow: 1px 1px 0px #888888; }
Ответ №2
Добавить в .buttons:
width:0;
Resut:
