Question

我是html和css的新手。我正在努力建立我的第一个网站。我想在导航栏的同一行上有一张图片，左边是图片。我首先尝试使用一些预先编写的代码用于下拉导航栏，但我无法将图像放在其左侧。我尝试了一些非常基本的代码，但我仍然无法想象如何将一个div（我的图像）放在导航器旁边。我不知道何时使用position以及何时使用float。我的目标很简单。得到一个div和nav并排坐着。这是我用来测试的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>
        Nav and div
    </title>
    <link rel="stylesheet" type="text/css" href="styleside.css">
</head>
<body>
<div>
    <img src="images/basil.jpg" alt="picture here" height="20%" width="20%">
</div>
<nav>
    <ul>
        <li>Home</li>
        <li>Big Friendly Button</li>
        <li>TARDIS</li>
    </ul>
</nav>
</body>
</html>

有人能指出我如何移动这些元素的起点吗？谢谢！

Answer 1

 <sytle> // Put this in css
  .anynames{ // this css is for position an image to the left
   position:relative;
   float:left;
  }
 </sytle>

    <div id="anynames"> //<---- Id this use to indicate specific DIV
     <img src="images/basil.jpg" alt="picture here" height="20%" width="20%" />
        </div>

如果这是正确的标记如果这不是我们找到的方式：D

Answer 2

你的两个元素div和nav需要在CSS中格式化。像这样：

<style>
.myDiv{
display:inline-block;
width:50%;
}
nav{
display:inline-block;
width:50%;
}
</style>

您必须输入div的类才能理解此代码

<div class="myDiv">

代码内联块将允许小于页面剩余宽度的元素堆叠在其旁边。

希望这有帮助！

Answer 3

有两种常用方法可以强制将两个块（通常为div）元素放在一起。

浮筒

浮点数用于强制元素沿页面的左侧或右侧严格对齐。但是，它们也可用于将两个块元素放在一起：

div.image {
    float: left;
}
nav {
    float: left;
}

请参阅 Fiddle

浮动元素相对于内联块的一个关键优势是浮动元素没有空格文本的默认边距（请参阅内联块部分）。

您还可以将nav下的代码更改为float: right;，这将在屏幕的不同侧面分隔图像和导航。

内联块

内联块通常用于显示段落内的块元素。但是由于两个内联元素在给定足够空间的情况下彼此相邻放置，我们可以使用它们来水平定位块：

div.image {
    display: inline-block;
}
nav {
    display: inline-block;
}

Fiddle 。

在小提琴中，我将导航红色着色，以显示两个元素之间的空间。如果对浮动元素执行相同操作，则会在图像和导航之间看不到空格。但是，这里有一个由inline-block元素的默认间距引起的小余量 - 浏览器希望在内联元素和周围文本之间放置空格。要摆脱空间，您必须添加

body {
    font-size: 0;
}
nav {
    font-size: 12pt;
}

为什么你不想要间距？我们经常需要以百分比描述的宽度。但是，如果要在指定加起来为100％的百分比时保持间距，则第二个元素会溢出到下一行，因为我们没有考虑额外的间距：请参阅 {{3} }

使用html / css将图像定位在菜单栏旁边

3 个答案:

浮筒

内联块