2

RubyonRailsとHTMLをいじりまわしているだけです。この質問はRoRに関するものではなく、HTMLとCSSに関するものです。体を中央に置くと、次のようになります。 ヘルプhttp://img88.imageshack.us/img88/2203/help.tif

箇条書きをテキストの横の中央に配置するにはどうすればよいですか？

また、while境界線を折りたたんでテキストに近づけるにはどうすればよいですか？

これが私のコードです：

私のアプリのレイアウト：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
    <head>
        <%= javascript_include_tag :defaults -%>
        <title><%= page_title.capitalize -%></title>
        <%= stylesheet_link_tag 'main' %>
    </head>

    <body>
        <div id="body" style="margin:0 auto; width:600px;">
            <%= yield -%>
            <%= render :partial => "layouts/footer" -%>
        </div>
    </body>

</html>

リストがあるマイページ：

<h1 id="welcome_sign">Welcome!</h1>
<h3 id= "sitemap">Site Map </h3>

<ul>
    <li><%= link_to "Animals", "/animals"%></li>
        <ol><li><%= link_to "Hello", "/animals/hello"%></li></ol>
    <li><%= link_to "Machines", "/machines"%></li>
    <ol>
        <li><%= link_to "Products", "/machines/products" %></li>
        <li><%= link_to "Report", "/machines/report" %></li>
        <li><%= link_to "Robot", "/machines/robot" %></li>
        <li><%= link_to "Show", "/machines/show" %></li>
    </ol>
</ul>

そして最後に、私のCSS：

#footer {
    font-size: 10pt;
    padding: 10px;
}

#sitemap {
    margin-bottom: 1em;
    line-height: 1.5em;
    margin-left: 2.0em;
    padding: 10px;

}

#welcome_sign {
    padding: 10px;
 }

body {
    background-color: #CDEAFF;

}

#body {
    background-color: #fff;
    border-top: 5px solid #999;
    border-bottom: 5px solid #999;
    border-right: 5px solid #999;
    border-left: 5px solid #999;
    text-align: center;
}
4

6 に答える 6

2

本文レベルではなく、一度に 1 つの要素をテキストの中央に配置することをお勧めします。

<html>
<body>
<div style="margin:0 auto;width:800px;">
<h4 style="text-align:center">Welcome</h4>
<ul>
    <li>List item</li>
    <li>List item</li>
</ul>
</div>
</body>
</html>

これにより、レイアウトの制御が大幅に向上するだけでなく、必要なものだけを中央に配置することもできます。

以下のコードを確認したら、 text-align: center; を削除してください。#body タグでは、リスト アイコンが左側にくっつくのを軽減するのに役立ちます。

于 2009-07-04T21:12:41.707 に答える
2

リストを中央に配置したいと言った場合、実際に必要なのは、境界ボックスをリストの中央に配置することだと思います。その上でテーブル表示モードを使用し、自動マージンを設定すると、IE を除くすべてで機能します。IE のために、代わりにリストに幅を設定する必要があります。

修正すべきもう 1 つの点は、リストの作成方法です。ul 要素内に表示される要素は、li 要素だけです。つまり、ol は li の中に表示されます。

ここにすべてがまとめられています：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      h1, h3 { text-align: center; }
      ul { margin-left: auto; margin-right: auto; width: 100px; }
    </style>
  </head>
  <body>
    <h1 id="welcome_sign">Welcome!</h1>
    <h3 id="sitemap">Site Map</h3>
    <ul>
        <li>
          Animals
          <ol>
            <li>Hello</li>
          </ol>
        </li>
        <li>
          Machines
          <ol>
            <li>Products</li>
            <li>Report</li>
            <li>Robot</li>
            <li>Show</li>
          </ol>
        </li>
    </ul>  
  </body>
</html>
于 2009-07-05T07:14:23.013 に答える
1

text-indent プロパティを設定し、おそらく余白とパディングも調整する必要があると思います。

ただし、スクリーンショットを見ると、HTML の基本的な理解が欠けています。そのような弾丸を表示するには、何か奇抜なことをしなければならないでしょう。

コードを投稿すると、より良い説明ができます。

于 2009-07-04T21:15:48.067 に答える
1

問題は、リスト要素 (テキスト) を中央に配置していても、リスト自体を中央に配置していないことです。たとえばFirebugで要素を調べると、各要素の実際のサイズが表示されます。そして、なぜこのように中央に配置されているのかがわかります。

リストに関するこのチュートリアルを読むことをお勧めします。

于 2009-07-04T21:51:17.447 に答える
0

参考までに...実際に要素のスタイルを設定できます。個人的には、それを絞り込んで中央に配置します。text-align: centerまた、すべての要素に対して行うことは避けたいと考えています。つまり、おそらく次のようなものが必要です...

<style type="text/css">
    html { text-align: center; }
    body { width: 960px; margin: 0 auto; }
    li { text-align: left; }
</style>
于 2009-07-04T21:39:48.907 に答える
0

リストをコンテナー div に入れ、margin-left/right: auto トリックを使用してみてください。コンテンツの編成が台無しになるため、リストを中央に配置することは避けたいと思います。 

<div style="width: auto; margin-left: auto; margin-right: auto;">
[your list here]
</div>
于 2009-07-04T21:18:25.487 に答える