HTMLの同じ行にテキストを配置する方法は？

私の地理学のクラスでは、さまざまな国でプレゼンテーションを行い、オプションの1つはウェブサイトでした。私は基本的なhtmlを知っているが、そのデザインや表示に関する多くのことは分かっていない。今、私は多くのウェブサイトで見ているように、同じ行にテキストを表示するのに苦労しています。私のコードは現在次のようになっています：HTMLの同じ行にテキストを配置する方法は？

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Swedish Political Geography</title> 
     </head> 
     <body> 
     <font face="verdana" size=“10”>Swedish Political Geography</font> 
     <ul class="navigation"> 
      <ul><font face="verdana" size=“10”>Borders</font></ul> 
      <ul><font face="verdana" size=“10”>Government</font></ul> 
     </ul> 
    </body> 
</html>

このページに他のファイルをリンクする際にも問題があります。もしあなたがそれを助けることができれば、それは非常に高く評価されるでしょう。これは私がそのためにしようとしてきたコードです：

<a href="borders.html">Borders</a>

私は自分のコードをテストするために、ローカルホストサーバーを使用していることを言及する必要があり、それは私が最終的に自分のプロジェクトを提示する方法です。

編集：明確にするために、スウェーデンの政治地理、国境、および政府のすべてを同じ行にしたいと思います。 -

出典

2017-12-02 Harry Potter

それはすべてが同じ行になるようにBordersないBorders – Radu

あなたは、このソリューションのためのCSSを少し必要があります。私はそれから始めます。

ディレクトリにすべてのHTMLファイルがある場合は、拡張子がCSSである限り、index.cssなどのCSSファイルを作成してください。各.htmlファイルの<head></head>は、このリンクを置く内部（あなたがindex.cssを使用しなかった場合は、あなたのCSSファイルの名前を変更）：あなたのHTMLに関して

<link rel="stylesheet" type="text/css" href="index.css">

、<ul></ul>要素が実際に各項目にリストを含むように意図されています<li></li>という項目で定義されています。それを知って、それはもう少し、このようになります。

<font face="verdana" size=“10”>Swedish Political Geography</font> 
<ul class="navigation"> 
    <li><font face="verdana" size=“10”>Borders</font></li> 
    <li><font face="verdana" size=“10”>Government</font></li> 
</ul>

<ul>と<li>要素はブロックレベル要素であり、それらが利用可能幅の100％を取り上げる意味します。これらの要素をinline-block要素に変更して、テキストでインライン展開しますが、ブロックレベル要素のように扱うことができます。そのために

、あなたのCSSファイルにこれをドロップします。

ul { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
}

...とのため<li>：

li { 
    display: inline-block; 
}

それは今非常に近いはずが、あなたはから弾丸をわかりますリストはまだぶら下がっています。のは、それらを削除してみましょう：list-style-type: none;を追加

ul { 
    display: inline-block; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}

は、装飾機能のいずれかの種類を表示しないよう<li>を伝えます。

これで、テキストが連続して表示されるはずです。

例： - ：インライン; `` ul.navigationのblock`に

<font face="verdana" size=“10”>Swedish Political Geography</font> 
 
<ul class="navigation"> 
 
    <li><font face="verdana" size=“10”>Borders</font></li> 
 
    <li><font face="verdana" size=“10”>Government</font></li> 
 
</ul>

出典

2017-12-02 20:35:54

ULはブロック要素であり、あなたはインライン要素

ディスプレイにそれを有効にする必要があります：インライン;ちょうどこの（またはあなたのCSSファイル内）のようなスタイルシートで

：

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Swedish Political Geography</title> 
      <style> 
       ul.navigation { 
       margin: 0; 
       padding: 4px; 
       } 
       ul.navigation li { 
       display: inline; 
       margin-right: 5px; 
       } 
      </style> 
     </head> 
     <body> 
     <font face="verdana" size=“10”>Swedish Political Geography</font> 
     <ul class="navigation"> 
      <li><font face="verdana" size=“10”>Borders</font></li> 
      <li><font face="verdana" size=“10”>Government</font></li> 
     </ul> 
    </body> 
</html>

出典

2017-12-02 20:14:50 jlemon

たくなければなりません開始のために '表示を追加 – jlemon

HTMLの同じ行にテキストを配置する方法は？

答えて

関連する問題