HTML为图片和其他文字添加障碍

时间:2016-06-14 07:15:03

标签: html css

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <body style="background-color:#38a9e3;">
    <link rel="stylesheet" href="css/bs.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


    <div id="main-sidebar">
        <div class="logo">
            <a href="x.html"><h1>x</h1></a>
            <span>x</span>
        </div>

        <div class="navigation">
            <ul class="main-menu">
                <li class=""><a href="x.html">x</a></li>
                <li class=""><a href="x.html">x</a></li>
                <li class=""><a href="x.html">x</a></li>
                <li class=""><a href="x.html">x</a></li>
                <li class=""><a href="x.html">x</a></li>
            </ul>
        </div>

</div>
    <center></center>
</body>
</html>

以上是网站任务栏的示例代码,我将在下面对css代码进行评论,因为将其放在此处只会对问题进行聚类。我如何在任务栏右侧这样做是一个单独的区域。现在,如果我尝试添加一个图像或写下它的东西,所以我必须集中所有内容并调整它,这真的很烦人。我怎么能编辑css或html来帮助我?

演示: jsfiddle.net/znu9ukk8

1 个答案:

答案 0 :(得分:0)

删除中心和部分。而不是添加这个:

  <div class="test">
     Test...

      </div>

和css

.test {
    float: right;
}

您可以自己设置边距,宽度和高度。告诉我这是不是你想做的。 http://prntscr.com/bg5adn