使用html / css在菜单栏旁边定位图像 [英] positioning an image next to a menu bar with html/css
问题描述
我对html和css很新。我正在尝试构建我的第一个网站。我想在导航栏的同一行上显示一张图片，并将图片放在左侧。我第一次尝试使用一些预先编写的代码来下拉导航栏，但我无法将图像定位在它的左侧。我尝试了一些非常基本的代码，但我仍然无法弄清楚如何将div（我的图像）放在导航栏旁边。我不知道何时使用 position 以及何时使用 float 。我的目标很简单，就是开始。获得div和nav并排坐。这里是我用来测试的html：
<！DOCTYPE html>
< html>
< head>
< title>
Nav和div
< / title>
< link rel =stylesheettype =text / csshref =styleside.css>
< / head>
< body>
< div>
< img src =images / basil.jpgalt =picture hereheight =20％width =20％>
< / div>
< nav>
< ul>
< li>主页< / li>
< li> Big Friendly Button< / li>
< li> TARDIS< / li>
< / ul>
< / nav>
< / body>
< / html>
任何人都可以指示我如何移动这些元素的起始位置？谢谢！
有两种常用的强制两个块的方法（通常是 浮动用于强制元素严格沿着页面的左侧或右侧对齐。然而，它们对于将两个块元素彼此放置也很有用： 请参阅 小提琴 浮动元素的一个关键优势是内嵌块对空格文本没有默认边距（请参阅内嵌块部分）。 您也可以更改 内联块通常用于显示段落内的块元素。但是，由于两个内联元素在给定足够空间的情况下放置在彼此旁边，我们可以使用这些元素来水平定位块： 和 小提琴 。 在小提琴中，我用导航红色显示两个元素之间的空间。如果您对浮动元素做了同样的处理，则在图片和导航之间将看不到空间。但是，这里有一个小的余量，由 为什么你不想要间距？我们经常需要用百分比来描述宽度。但是，如果在保持间距的同时指定百分比合计为100％，则第二个元素将溢出到下一行，因为我们没有考虑额外的间距：请参阅 小提琴 。 I am very new to html and css. I am trying to build my first website. I would like to have a picture on the same line as a nav bar, with the picture to the left. I first tried using some prewritten code for a drop down nav bar, but I was unable to position an image to the left of it. I tried some very basic code, but I still cannot figure our how to put a div (my image) next to a nav. I don't quite know when to use Can Anyone point me to a starting place for how to move these elements around? Thank you! There are two common methods of forcing two block (commonly Floats are used to force elements to strictly align along the left or right of a page. However, they are also useful for placing two block elements beside one another: See this Fiddle One key advantage floating elements over inline blocks is that floating elements don't have a default margin to space text (see Inline blocks section). You can also change the code under Inline blocks are often used to display block elements inside a paragraph. But since two inline elements are placed beside each other given enough room, we can use these to position blocks horizontally: And the Fiddle. In the Fiddle I've colored the nav red to show the space in between the two elements. If you did the same for the floating elements, you'll see no space between the image and the nav. However, here there is a small margin caused by the default spacing given to Why would you want no spacing? We often want widths described in percentages. However, if you were to keep the spacing while specifying percentages that add up to 100%, the second element would spill over onto the next line because we didn't take the extra spacing into account: see this Fiddle. 这篇关于使用html / css在菜单栏旁边定位图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ div
浮动
div.image {
float：left ;
}
nav {
float：left;
}
nav 到元素的默认间距引起 - 浏览器想要在内联元素和周围文本之间放置空格。为了摆脱这个空间，你必须添加 float：right; 这将在屏幕的不同侧分隔图像和导航。
内联块
div.image {
display：inline-block;
}
nav {
display：inline-block;
}
body {
font-size：0;
}
nav {
font-size：12pt;
}
position and when to use float. My goal is simple to start. Get a div and nav to sit side-by side. Here is the html I am using to test: <!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>
div) elements to sit beside each other.Floats
div.image {
float: left;
}
nav {
float: left;
}
nav to float: right; which will separate the image and nav on separate sides of the screen.Inline blocks
div.image {
display: inline-block;
}
nav {
display: inline-block;
}
inline-block elements - the browser wants to put space between an inline element and the surrounding text. To get rid of the space, you must addbody {
font-size: 0;
}
nav {
font-size: 12pt;
}
