0

まず第一に、私は HTML が苦手です。Div は私を混乱させます。今私がやろうとしていることは、これらの 2 つのボックスをページの中央に配置し、その間に約 20px を配置することです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FirstCSS.css">
<title>Services and Rates</title>
</head>

<body style="background-color:pink;">
<div id="top" align="center">
<header>
    <h1 style="color:purple">Services and Rates</h1>

    <nav>
    <hr color="purple" width="80%">
    <table style="color:purple">
    <tr>
    <td style="padding-right: 50px"><a href="mqhomepage.html">Home</a></td>
    <td style="padding-right: 50px"><a href="mqaboutme.html">About Me</a></td>
    <td style="padding-right: 50px"><a href="mqphotogallery.html">Photo Gallery</a></td>
    <td><a href="mqservicesandrates.html">Services and Rates</td>
    </tr>
    </table>
    <hr color="purple" width="80%">
    </nav>
    </div>


    <div id="embroideryrates" class="centeredlistleft" >
    <h3 style="color:purple" align="center"> Embroidery </h3>
    <ul>
    <li>Colored Towel (Non White)
    <ul>
    <li>$12</li>
    </ul>
    </li>
    <li>White Towel
    <ul>
    <li>$8</li>
    </ul>
    </li>
    </ul>
    </div>

    <div id="quiltingrates" class="centeredlistright">
    <h3 style="color:purple" align="center"> Quilting </h3>
    <ul>
    <li>Custom Made Quilt
    <ul>
    <li>$400</li>
    </ul>
    </li>
    <li>Batting
    <ul>
    <li>$75</li>
    </ul>
    </li>
    <li> Lessons
    <ul>
    <li> $50/hour</li>
    </ul>
    </li>
    </ul>
    </div>

現在、刺繍用とキルティング用の 2 つのボックスが左端と右端にあります。それらを中心に置くことができないようです。そして、これが私のCSSです。

@charset "utf-8";
/* CSS Document */

.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:left;

}

.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:right;

}

.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}

私はここから離れて物事を複雑にしすぎていると確信していますが、再び Div タグは私には意味がありませんでした。

4

4 に答える 4

0

リンクをチェックしてください

cssを追加する

#listboxes {
  width: 660px;
  margin: 0 auto;
  text-align: center;

}

.centeredlistleft {

    margin-right:10px;
}

.centeredlistright {

    margin-left:10px;
}
于 2013-10-02T07:19:32.483 に答える
0

これは機能します。2 つのリストのラッパー部分を配置します。

<div id="listswrapper" >
 <div id="embroideryrates" class="centeredlistleft" >
 <div id="quiltingrates" class="centeredlistright">
</div>

次に、次のようにスタイリングを行います。

#listswrapper {
  width: 640px;
  margin: 0 auto;
  text-align: center;

}

.centeredlistleft {
  width:300px;
  margin:0 auto;
  text-align:left;
  border:2px solid;
  display: inline-block;
}

.centeredlistright {
  width:300px;
  margin:0 auto;
  text-align:left;
  border:2px solid;
  display: inline-block;
}

いくつかの点が指摘されました：

q0re によって与えられた解決策は機能しません (ただし、私は反対票を投じるものではありません:)) float:leftcenteredlistleft 部門のためです。むしろ、両方のリスト (div) をインライン ブロックとして表示する必要があります。

SKV による解決策は align="center" により機能する可能性があります (私はテストしていません) が、これは非推奨のスタイリング方法です。

Sindhu によるソリューションは、センター スタイリングを全身に適用します。分割ごとに制御したい場合、これは望ましくない場合があります。また、幅 400 ピクセルのコンテンツ div は、2 つの部門が 600 ピクセルと境界線とパディングを組み合わせているため、不明です。

非常に重要: 間違ってコピーした可能性がありますが、HTML が常に正しい形式であることを確認してください。end-body タグがありません。一般に、このような小さな間違いは、初心者にとって時間のかかるバグにつながる可能性があります。

幸せなウェブ開発！

于 2013-10-02T06:58:09.920 に答える