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

我正在尝试做一个小的网页布局。我到目前为止有什么is this。如何将内容与列表放在同一行上？

我试图让导航栏在同一水平线上的按钮。换句话说，我希望“显示日期”按钮直接位于“主页”导航按钮的右侧。我无法更改按钮的边距 - 它将自身调整为导航栏的底部边框，如边距为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***** -->

来源

2012-07-03 user1472747

总是得到你的样品有无关的问题，摆脱所有代码。 –

您应该将导航栏（和其他部分）放在'div'标签中，以便在页面上创建部分。 – JSW189

对不起Seth，我不确定哪些部分对此很重要。和JSW，我看到了div标签，但对它们的工作方式有点困惑 - 他们是否创建了一个“范围”，以便我可以在2个不同的div标签中使用相同的类名来引用不同的东西？ – user1472747

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

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

来源

2012-07-03 17:35:54 abhshkdz

没问题。干杯!不要忘了把你的部分放在不同的div中。这是正确的方式去做东西。 – abhshkdz

你应该先删除您display:block为a:link, a:visited并添加样式，例如：

ul li{ 
    display:inline; 
}

来源

2012-07-03 17:35:45 renard

那不是他想要的。他希望按钮位于相同水平面的导航栏的右侧。 – abhshkdz

没错。我应该读更好的... – renard

使用float：留下您的UL tag.Usually，这不是实现this.Put列表一个div内，然后使用float的正确方法：左与股利。

来源

2012-07-03 17:50:38 abhi120

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

你可以通过CSS定位来解决这个问题。 http://www.w3schools.com/Css/css_positioning.asp不同的位置将允许您操纵元素的显示方式。你会想看看这个特殊情况下的'浮动'位置。

来源

2012-07-03 17:53:35 smilebomb

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

来源

2012-07-03 18:07:21 wmschott

OH！我知道了。真棒。非常感谢！ – user1472747

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

回答

相关问题