javascript - リストと同じ行にコンテンツを配置するにはどうすればよいですか？

Question

私は小さなウェブレイアウトを作ろうとしています。私が今まで持っているのはこれです。

ナビゲーションバーと同じ水平線上にボタンを配置しようとしています。つまり、「ホーム」ナビゲーションボタンのすぐ右側に「日付を表示」ボタンが必要です。ボタンの余白を変更することはできません-ナビゲーションバーの下の境界線に合わせて調整されます。たとえば、マージン0では、ナビゲーションバーの下の境界線の真下にあります（スクリーンショットを参照してください）。

コードが乱雑で読みにくい場合は申し訳ありませんが、私は最初のレベルにいます。

これがそのコードです-

<!DOCTYPE html>
<html>
    
    <head>
        <!-- *****CSS CODE START*****-->
        <style type="text/css">
            /*navigation bar*/
            ul {
                list-style-type:none;
                margin:50;
                padding:0;
            }
            a:link, a:visited {
                display:block;
                font-weight:bold;
                color:#dd731c;
                background-color:#473e36;
                width:120px;
                text-align:center;
                padding:4px;
                text-decoration:none;
                text-transform:uppercase;
            }
            a:hover, a:active {
                background-color:#bea792;
            }
            a:hover {
                color:black;
            }
            a:active {
                color:#dd731c;
            }
            /*button margins*/
            button.button1 {
                margin-top:0px;
                margin-bottom:10px;
                margin-right:50px;
                margin-left:200px;
            }
            button.button2 {
                margin-top:0px;
                margin-bottom:10px;
                margin-right:50px;
                margin-left:200px;
            }
            button.button3 {
                margin-top:0px;
                margin-bottom:10px;
                margin-right:50px;
                margin-left:200px;
            }
            /*line*/
            #middle hr.line {
                height: 1px;
                margin: 0 30px 5px 30px;
            }
            /*other*/
            body {
                background-color:#473e36;
            }
            h1 {
                color:orange;
                text-align:center;
            }
            p {
                font-family:"Times New Roman";
                font-size:20px;
            }
        </style>
        <!-- *****CSS CODE END***** -->
    </head>
    <!-- *****HTML CODE START***** -->
    
    <body>
        <h1>title</h1>
        <!-- line -->
        <hr class="line">
        <!-- navigation bar list -->
        <ul>
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#news">News</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
            <li>
                <a href="http://www.google.com">About</a>
            </li>
        </ul>
        <!-- buttons -->
        <button type="button" button class="button1" onclick="displayDate()">Display Date</button>
        <text id="demo">This is a paragraph.</text>
        <br />
        <button type="button" button class="button2" onclick="displayName()">Display Naaaame</button>
        <br />
        <button type="button" button class="button3" onclick="count()">count!</button>
        <text id="counter">0</text>
    </body>
    <!-- *****HTML CODE END***** -->




</html>
<!-- *****JavaScript CODE START***** -->
<script type="text/javascript">
    var currentNum = 1;




    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }




    function displayName() {
        document.getElementById("demo").innerHTML = "jim";
    }




    function count() {
        document.getElementById("counter").innerHTML = currentNum;
        currentNum = ++currentNum;
    }
</script>
<!-- *****JavaScript CODE END***** -->

score 1 · Accepted Answer

理解したいのは、CSSの配置と、ブロックレベルの要素とインライン要素の違いです。ブロックレベルの要素には、前後に改行があります。デフォルトでは、ULはブロックレベルです。インライン要素には、この改行属性はありません。使用しているボタンタグは線です。これは、ULの後にボタンを追加したときにそれが新しい行に表示された理由を説明するはずです。しかし、ボタンを追加し続けると、ボタンは互いに水平に表示され、異なる線上には表示されませんでした。http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

これはCSSポジショニングで修正できます。http://www.w3schools.com/Css/css_positioning.aspさまざまな位置で、要素の表示方法を操作できます。この特定の状況では、「フロート」位置を確認する必要があります。

score 1 · Accepted Answer

float:leftナビゲーションにを追加するだけulです。

ここでは、http：//jsfiddle.net/6HVtq/

score 1 · Accepted Answer

ulタグでfloat：leftを使用します。通常、これを実現する適切な方法ではありません。リストをdiv内に配置してから、そのdivでfloat：leftを使用します。

score 1 · Accepted Answer

DIVタグを使用して、レイアウト領域を制御するためのグリッドシステムを設定してみてください。次に例を示します。

<!DOCTYPE html>
<html>
<head>
<!-- *****CSS CODE START*****-->
<style type="text/css">

/*navigation bar*/
ul
{
  list-style-type:none;
  margin:5;
  padding:0;
}
a:link,a:visited
{
  display:block;
  font-weight:bold;
  color:#dd731c;
  background-color:#473e36;
  width:120px;
  text-align:center;
  padding:4px;
  text-decoration:none;
  text-transform:uppercase;
}
a:hover,a:active
{ 
  background-color:#bea792;
}

a:hover   {color:black;}
a:active  {color:#dd731c;}

/*button margins*/

button.button1
{
 margin-top:0px;
 margin-bottom:10px;
 margin-right:50px;
 margin-left:5px;
}

button.button2
{
margin-top:0px;
margin-bottom:10px;
margin-right:50px;
margin-left:5px;
}

button.button3
{
 margin-top:0px;
 margin-bottom:10px;
 margin-right:50px;
 margin-left:5px;
}


/*line*/
 #middle hr.line{
 height: 1px;
 margin: 0 30px 5px 30px;
}

/*other*/
body {
 background-color:#473e36;
}
h1
{
 color:orange;
 text-align:center;
}

.grid-900
{
  position: relative;
  width: 900px;
  display: inline-block;
  float: left;   
}

.grid-600
{
  position: relative;
  width: 600px;
  display: inline-block;
  float: right; 
}
 .grid-300
{
  position: relative;
  width: 300px;
  float: left; 
}
p
{
 font-family:"Times New Roman";
 font-size:20px;
 }


</style>
<!-- *****CSS CODE END***** -->
</head>

<!-- *****HTML CODE START***** -->
<body>

<h1>title</h1>

<div class="grid-900"> 
<div class="grid-300">
<!-- navigation bar list -->
        <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="http://www.google.com">About</a></li>
        </ul>
</div>
<div class="grid-600">
         <button type="button" button class="button1" onclick="displayDate()">Display Date</button>
         <text id="demo">This is a paragraph.</text>
         <br />
         <button type="button" button class="button2" onclick="displayName()">Display Naaaame</button>
         <br />
         <button type="button" button class="button3" onclick="count()">count!</button>
         <text id="counter">0</text>

         <!-- line -->
        <hr class="line">
</div>

</body>
<!-- *****HTML CODE END***** -->
</html> 


<!-- *****JavaScript CODE START***** -->
<script type="text/javascript">
var currentNum=1 ;

function displayDate()
{
  document.getElementById("demo").innerHTML=Date();
}

function displayName()
{
  document.getElementById("demo").innerHTML= "jim";
}

function count()
{
  document.getElementById("counter").innerHTML = currentNum;
  currentNum = ++currentNum;
}

 </script>

score 0 · Accepted Answer

display:block最初にforを削除し、次a:link, a:visitedのようなスタイルを追加する必要があります。

ul li{
   display:inline;
}

javascript - リストと同じ行にコンテンツを配置するにはどうすればよいですか？

5 に答える 5

Related

Reference