htmlを使用して1行に別々のコンテンツを書き込む方法は？

私はWeb開発を初めて使い、このページを練習として作成しようとしています。 original page これは、これは、ABOUT、ページは、私は、元の画像に my page htmlを使用して1行に別々のコンテンツを書き込む方法は？

テキストDINUKAとリンクPORTFOLIOのようなルックスを作成する方法であるCONTACT私のコード

<body bgcolor="white" <div width=1030px height=150px style="color: white;background-color:black "> 
 
    <p><i>DUNUKA</i></p> 
 
    <nav align="right"> 
 
    <a href=" indexOld.html " style="text-decoration: none;color: white ">PORIFPLIO|</a> 
 
    <a href="about.html " style="text-decoration: none ;color: white ">ABOUT|</a> 
 
    <a href="contact.html " style="text-decoration: none;color: white ">CONTACT|</a> 
 
    </nav> 
 
    <br> 
 
    </div> 
 
    <div style="background-color: grey " width=1020px height=100px> 
 
    <br> 
 
    <p align="center "> Protfolio</p> 
 
    <br> 
 
    <hr /> 
 
    <br> 
 
    </div> 
 

 
    <div height=800px width=1 010px> 
 
    <table border="0px " cellspacing="0px " bgcolor="white " width="1000px " height="320px "> 
 
     <tr align="center "> 
 
     <td><img src="p1.png " width="150px " height="130px " /></td> 
 
     <td><img src="p3.png " width="150px " height="130px " /></td> 
 
     <td><img src="p6.png " width="150px " height="130px " /></td> 
 
     </tr> 
 
     <tr align="center "> 
 
     <td><img src="p2.png " width="150px " height="130px " /></td> 
 
     <td><img src="p4.png " width="150px " height="130px " /></td> 
 
     <td><img src="p6.png " width="150px " height="130px " /></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <div style="color: white;background-color: black " align="center " width=1020px height=200px> 
 
    <br /> 
 
    <p>@All rights received</p> 
 
    <img src="google_plus_img.png " height="15px " width="15px " /> 
 
    <img src="facebook_img.png " height="15px " width="15px " /> 
 
    <img src="twitter_img.png " height="15px " width="15px " /> 
 
    <img src="linkedin_img.png " height="15px " width="15px " /> 
 
    <br /> 
 
    <br /> 
 
    </div> 
 
</body>

です（同じレベルのページ上に）同じ行に表示されますが、私のページには2行で表示されます。どのようにして同じ行に表示させることができますか？私はウェブ開発を初めて利用しています

出典

2017-11-29 Kim

チェック[この]（https://www.w3schools.com/css/css_navbar.asp） – sTx

ブートストラッププラグインを使用すると、そのようなことをたくさん作成するのに役立ちます。

プラグイン：https://getbootstrap.com/

ナビゲーションバーのドキュメント：https://v4-alpha.getbootstrap.com/components/navbar/#color-schemes

例：https://getbootstrap.com/docs/3.3/components/#navbar

それはあなたがそれを必要とする方法

出典

2017-11-29 10:39:14

メニューを作成します。私は、あなたがすべき（HTMLに書き込みCSSに対してお勧め別のCSSシートを作成してリンクしてください）、ここで簡単に修正できます:)

Check it out here

<div style="color: white;background-color:black;height: 50px;"> 
<div id="navBarContent" style="line-height: 40px; padding: 5px 10px 5px 10px; "> 
    <p style="display: inline-block; margin: 0; "> 
     <i>DUNUKA</i> 
    </p> 

    <nav align="right" style="display: inline-block; float: right;"> 
     <a href="indexOld.html" style="text-decoration: none;color: white">PORIFPLIO|</a> 
     <a href="about.html" style="text-decoration: none ;color: white">ABOUT|</a> 
     <a href="contact.html" style="text-decoration: none;color: white">CONTACT|</a> 
    </nav> 
</div>

私はあなたがCSSを使用して快適になったときに、ブートストラップを見てお勧めします、それは非常に簡単にあなたの全体のウェブデザインの経験をします:) Get Bootstrap Here

出典

2017-11-29 10:45:09 Srax

、それはあなたがupvote/downvoteの下に 'チェックマーク' をクリックしてください助けた場合。 – Srax

あなたのコードの変更で

<p><i>DUNUKA</i></p> 
<nav align="right">

へ

<span><i>DUNUKA</i></span> 
<nav style="display: inline-block; float: right;>

出典

2017-11-29 10:45:30

それはあなたのpタグとナビゲーションの幅が100％であるため、あなたがこれらのスタイルを追加しようとすることができますpの

が

width: 100px; 
    display: inline;

を追加して、ナビゲーションのために追加され

width: 300px; 
float: right;

、1030px

padding: 8px;

出典

2017-11-29 10:47:26 PeterJoe

1）基本レベルでは、ブレークラインを使用できます。 <br/>

2）div内にalign:right CSSプロパティを使用できます。

3）コード内にBootstrap-3/4を簡単に使用することができます。これにより、多くの作業が楽になります。

リンク：https://getbootstrap.com/

出典

2017-11-29 10:48:58

htmlを使用して1行に別々のコンテンツを書き込む方法は？

答えて

関連する問題