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

1

只需添加一个float:left到您的导航ul。

在这里，http://jsfiddle.net/6HVtq/

于 2012-07-03T17:35:54.013 回答

score 1 · Accepted Answer

将 float:left 与 ul 标签一起使用。通常，这不是实现此目的的正确方法。将列表放入 div 中，然后将 float:left 与该 div 一起使用。

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:blockfora:link, a:visited并添加一个样式，例如：

ul li{
   display:inline;
}

javascript - 如何将内容与列表放在同一行？

5 回答 5

Related

Reference