CSSに関して

皆様、質問がございます。よろしくお願い申し上げます。

現在下記のようにRubySearchやHomeをheaderに配置したいのですが、その方法がいまいちわかりません。

そのため、下記のように配置できるCSSのコードを教えていただければと思います。

よろしくお願い申し上げます。

pi-chan

2015/08/26 13:06

CSSってhtml側の構造に完全に依存しているので、関連する箇所のhtmlソースを提示すると的確な回答が得られやすいですよ～

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<style>
2body {
3	margin: auto;
4	padding: 0px;
5	font-family:Verdana;
6}
7.table {
8	display: table;
9	box-sizing: border-box;
10	padding-left: 15px;
11	width: 100%;
12	background: #eee;
13}
14.table_cell {
15	display: table-cell;
16	height: 50px;
17	vertical-align: middle;
18}
19.title {
20	width: 160px;
21	font-size: 24px;
22}
23.blank {
24	width: auto;
25}
26.links {
27	width: 300px;
28	min-width: 300px;
29</style>
30</head>
31<body>
32<header>
33	<div class="wrap">
34		<div class="table">
35			<div class="table_cell title">
36				RubySearch
37			</div>
38			<div class="table_cell blank"></div>
39			<div class="table_cell links">
40				Home
41				TwitterTrend
42				YoutubeSearch
43			</div>
44		</div>
45	</div>
46</header>