Question

我正在尝试制作一个小小的网页布局。到目前为止我所拥有的is this。

我正在尝试将按钮放在与导航栏相同的水平线上。换句话说，我希望“显示日期”按钮直接位于“主页”导航按钮的右侧。我无法更改按钮上的边距 - 它会将自身调整到导航栏的下边框，如同在0的边缘，它直接位于导航栏的下边框下方（如屏幕截图所示）。 / p>

如果代码混乱或难以阅读，我很抱歉，我处于最初阶段。

以下是代码 -

<!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***** -->

Answer 1

只需在导航float:left中添加ul。

此处http://jsfiddle.net/6HVtq/

Answer 2

使用float：left和ul标签。通常，这不是实现此目的的正确方法。将列表放在div中，然后使用float：left和div。

Answer 3

您想要了解的是CSS定位以及块级元素与内联元素之间的区别。块级元素在它们之前和之后都有换行符。默认情况下，UL是块级的。内联元素没有此换行属性。您正在使用的按钮标签是直线。这可以解释为什么当您在UL之后添加按钮时它出现在新行上。但是当你不断添加按钮时，它们彼此呈现水平，而不是在不同的线条上。 http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

您可以使用CSS定位来解决此问题。 http://www.w3schools.com/Css/css_positioning.asp不同的位置将允许您操纵元素的显示方式。对于这种特殊情况，您需要查看“浮动”位置。

Answer 4

尝试使用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>

Answer 5

您应首先移除display:block a:link, a:visited，然后添加以下格式：

ul li{
   display:inline;
}

如何将内容放在列表的同一行？

5 个答案: