Q&A
CSSのみではなくHTMLも提示していただかないと分からないと思います。
前提・実現したいこと
社員管理システムを作成しております。
画面の配置について、リンクおよびボタンをテーブル幅に合わせて配置したいです。
発生している問題
現在、下図のようにログアウトリンクと新規登録ボタンがテーブル幅を超えて配置されています。
該当のソースコード
リンクとボタンは、以下の通り設定しております。
これだと、画面サイズが変わったときに配置がばらばらになってしまうのが現状です。
html
1<html> 2<head> 3<meta charset="UTF-8"> 4<title>社員管理システム</title> 5<link type="text/css" rel="stylesheet" href="css/listStyle.css"> 6</head> 7<body> 8 <form action="detail" name="form" method="post"> 9 <%-- ログアウト --%> 10 <a href="./logout" class="link">ログアウト</a> 11 <div id="wrapper"> 12 <div id="header"> 13 <h2>社員一覧</h2> 14 </div> 15 </div> 16 <%-- 新規登録ボタン --%> 17 <input type="button" value="新規登録" onclick="window.location.href='detail'" class="add-employee-button"> 18 <div id="container"> 19 <table> 20 21 省略 22 23 </table> 24 </div> 25 </form> 26</body> 27</html>
css
1#container { 2 margin: auto; 3 width: 100%; 4 padding: 15px 0px 15px 0px; 5 text-align: center; 6} 7 8table { 9 border-collapse: collapse; 10 border: 1px solid black; 11 margin-left:auto; 12 margin-right:auto; 13} 14 15/* 新規登録ボタン */ 16.add-employee-button { 17 padding: 5px 10px; 18 margin-bottom: 0px; 19 margin-left:82%; 20 21} 22 23/* ログアウトリンク */ 24.link{ 25 margin-bottom: 0px; 26 margin-left:82%; 27} 28
解決方法分かる方いらっしゃいましたら、ご教授いただけると幸いです。
table{width:100%}
とすれば、テーブル幅と一致すると思いますが、それではダメなのですよね？
回答2件
0
ベストアンサー
一番簡単な方法は
<body>の直下に一つ<div>を入れてログアウトからtableまでをひとくくりにする事だと思いますよ。その際、divには widthも指定された方が良いと思います。
投稿2019/06/29 06:57
総合スコア296
0
最終的にどういう表示にしたいのかが不明なので推測ですが
同じ横幅でそろえたい場合はdivなり他のブロック要素でそろえた内容を1つにまとめる方法が良く使われます。
今回ヘッダーのタイトル部分だけがwrapper内に入っている理由がわからないのですが、特に理由がないのであれば、今回のケースではその中にボタン要素もテーブルも入れてしまうのが良いかと思います。
html
1<div id="wrapper"> 2 <div id="header"> 3 <h2>社員一覧</h2> 4 </div> 5 <%-- 新規登録ボタン --%> 6 <input type="button" value="新規登録" onclick="window.location.href='detail'" class="add-employee-button"> 7 <div id="container"> 8 <table> 9 10 省略 11 12 </table> 13 </div> 14</div>
こうしておけば、CSS等でwrapperの横幅を決めればそのサイズ内に収まります。
投稿2019/06/29 07:11
総合スコア177
あなたの回答
tips
プレビュー
