嗨!如何将div背景图像与<ul>并排放置，但不使用FLOAT。仅用每个元素的宽度
将div背景图像与<ul>并排放置，但不使用FLOAT，可以使用以下方法：
- 使用display: inline-block;属性：将div和<ul>元素设置为display: inline-block;，这将使它们在同一行上并排显示。然后，设置每个元素的宽度，以确保它们适应所需的布局。例如：
div, ul {
display: inline-block;
}
div {
width: 50%;
background-image: url('背景图像地址');
background-size: cover;
}
ul {
width: 50%;
list-style-type: none;
}- 使用flexbox布局：使用flexbox布局可以更灵活地控制元素的排列方式。将父容器设置为display: flex;，然后使用flex属性来控制每个元素的宽度。例如：
.container {
display: flex;
}
div {
flex: 1;
background-image: url('背景图像地址');
background-size: cover;
}
ul {
flex: 1;
list-style-type: none;
}- 使用grid布局：使用grid布局也是一种有效的方法。将父容器设置为display: grid;，然后使用grid-template-columns属性来定义每个元素的宽度。例如：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
div {
background-image: url('背景图像地址');
background-size: cover;
}
ul {
list-style-type: none;
}以上是三种常用的方法，可以将div背景图像与<ul>并排放置，而不使用FLOAT。根据具体情况选择适合的方法，并根据需要调整元素的宽度和其他样式。
相关·内容
3回答
如何将红色方框并排并留空格以进行分隔，以及如何将登录/注册按钮置于标题的蓝色背景中？
我尝试过使用float。
我希望红色的方框水平并排，中间留有空格，而登录/注册按钮位于标题背景中。
header {
background-color: Blue;
color: yellow;
margin-top: -21px;
margin-left: -10px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
nav ul {
list-style:
浏览 0提问于2019-08-16得票数 0
1回答
我不知道我在哪里出了错。我有三个div(实际上是ul li)，我想让它们响应。Divs需要并排从1180 it到500 it，在500 it(小于500 it)之后，div需要100%的宽度，另一个在另一个下面，我做到了。唯一的问题是如何使它们从1180 is并排到500 is？这是代码
<section class="portfolio">
<div class="wrapper">
<ul>
<li>
<div class=&
浏览 3提问于2015-07-01得票数 0
回答已采纳
1回答
我一直试图为我的导航条设置一个背景色，但不知怎么我的代码不起作用。下面是使用的HTML & CSS：
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: red;
}
li {
float: right;
}
a {
display: block;
padding: 8px;
}
<nav>
<ul>
<li><a href="#">Home</a></li&g
浏览 1提问于2021-07-23得票数 0
回答已采纳
4回答
我的CSS：
body
{
font-family:verdana;
line-height:1.5em;
color:#666;
font-size:0.8em;
}
.objectAttributesOuter
{
border: 1px solid #999;
padding:6px;
margin:6px;
background-color:#EDEEFA
}
.objectAttributes
{
padding: 5px, 0px, 5px, 5px;
}
.whiteBoxWithBorder
{
浏览 1提问于2012-07-20得票数 1
回答已采纳
3回答
我试图创建一个以ul列表为主菜单，以div集合为子菜单的菜单，HTML和CSS如下所示，
<ul>
<li><a>AAAAAA</a>
<div class="m-div group">
<div class="child">
<a>ITEM One</a><br />
<a>ITEM One</a><br /&g
浏览 0提问于2013-11-08得票数 2
回答已采纳
4回答
我有一个封装了许多无序列表(ul)的div。我将每个ul设置为"float:left“。我还将包含它们的父div设置为"overflow-x:scroll“。发生的情况是，当ul到达页面的边缘时，它们是包裹的，而不是并排在一起，以利用父div的滚动属性(滚动条在那里)。为什么？我该如何解决这个问题呢？
谢谢你的帮助。
浏览 2提问于2011-05-08得票数 10
回答已采纳
嗨，我希望设置一个居中的页脚，使用列表项目，在每个列表项目内无组织的列表。如果我尝试使用float:left，我会让它们彼此内联，但不再居中。我目前拥有的代码看起来像这样: css：
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
display:inline;
}
.mainLI {
dis
浏览 6提问于2012-05-10得票数 0
我有以下布局：
<div style="float:right ...">Contents</div>
<table>contents</table>
我希望在没有空间同时显示两个元素时，div将移动到表下面。我怎么能这么做？目前它们是重叠的。
编辑：
这是一个模板，所以我想避免将任何宽度编码到布局中。div和表应该根据其内容调整大小，然后决定如何将它们放置在div上方的并排或表上。基本上，我在寻找类似于min-width: <content width request>的东西
浏览 0提问于2011-07-20得票数 0
回答已采纳
3回答
我在父div ( "header“)中有4个HTML元素，并且我试图并排显示子div的元素。问题是div "headerTitle“的背景色溢出。如何将背景色限制在字体本身上？另外，如果您查看快照，左边的HTML元素将被移到线下(它们与其他元素不一致)。请帮帮我..。
HTML代码：
<div id="header" >
<div id="City1">
Cities
</div>
<div id="headerTitle">
Happy
浏览 3提问于2016-03-12得票数 0
回答已采纳
3回答
列表按钮响应式设计
、、、、
如何将此按钮内联以进行响应？我试过了，但不起作用。
<div class="form-group btn-group" >
<ul class="btn-group list-inline social " style="display: flex;">
<li class="col-xs-12">
<button type="submit" class="btn btn-default" name="btn
浏览 1提问于2017-03-30得票数 0
2回答
不管浮点数的宽度如何，两个浮点数可以并排吗？
基本上，我有以下几点：
#container { height: 100%; width: 100%; overflow: auto; background-color: #F6F9FF; }
#navigation { height: 100%; width: 300px; float: left; overflow: auto; background-color: green;}
#content { float: left; background-color: blue;}
<div id="container"&g
浏览 1提问于2010-12-31得票数 2
回答已采纳
我正在尝试制作仅限CSS的下拉列表。我有一些CSS，当导航项目悬停时，它的背景颜色会改变。
.horiz-nav {
background: linear-gradient(#EEE, #900) no-repeat fixed;
border: none;
outline: none;
}
.horiz-nav ul {
list-style: none;
}
.horiz-nav ul li {
display: inline-block;
padding: 1.2em;
clear: none;
float: left;
margin: 0 0;
浏览 5提问于2015-07-30得票数 0
编辑:我有一个div，它占据窗口的左半部分。里面是另外两个div。如何将内部div叠加在另一个上，同时将两个div都浮动到右侧。如果您查看JSFiddle，这两个div是并排的。
当两个div是浮动的时候，将一个div放在另一个div下面的CSS属性是什么:对吗？
代码：
@charset "UTF-8";
/* CSS Document */
#bdy{
font-family: Verdana, Geneva, sans-serif;
position: relative;
}
#left{
height: 100%;
width: 50%;
浏览 6提问于2014-08-13得票数 0
回答已采纳
好吧.我想不出有什么办法。似乎什么都没有用，我有一张770x250的图像。还有三个174x34的透明按钮图像png。770x250图像应该有三个可点击的链接区域:第一、第三、第三和第三。
我的策略是把大的形象设定为一个div的背景。然后浮动:将三个png放在上面，加上适当的边距，将其正确地放置在背景图像上。然后将包含图像的每个元素的宽度设为33%。
就像这样：
<div class="topimage">
<ul>
<li><img style="float:left;" src="buttons3.
浏览 7提问于2014-05-02得票数 0
回答已采纳
1回答
我有以下HTML代码来创建垂直导航栏：
<div id="nav">
<ul>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
<li><a>Hello</a>
浏览 3提问于2014-10-29得票数 0
回答已采纳
3回答
具有另一个子元素的重叠列表项
、、、、
我有物品清单。悬停时，背景应突出显示每个项目的灰色。我也希望能够在"X“上盘旋，将其背景更改为红色。
但是，在下面的代码中，当我在每一行上悬停时，项目背景位于"X“的顶部，因此无法在"X”上悬停。
代码：
HTML:
<ul>
<li>
<a>Long title for Item 1</a>
<i class=icon></i>
</li>
<li>
<a>Item 2</a>
浏览 5提问于2013-11-14得票数 0
回答已采纳
2回答
嗨，在下面的代码中，如何将空间划分为所有的小列表，它应该是中心。除了家如何划分三个相等的部分
预期输出: Home _
#section ul {
width: 1050px;
margin: 1px auto 0 auto;
height: 50px;
padding: 0;
float: relative;
border-style: solid;
border-width: 1px;
background-color: #556B2F;
}
#section ul li {
浏览 4提问于2015-02-23得票数 1
回答已采纳
2回答
由于某些原因，我不能将一个<li>并排显示：
ul {
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: 100%;
height: 100%
}
.bg1 {
background-color: red;
}
.bg2 {
background-color: #000;
}
<ul>
<li class="bg1">item 1</li>
<li class="bg2">item 2</
浏览 0提问于2016-10-17得票数 0
2回答
我正在尝试制作一个带有水平子菜单的水平菜单。我尝试过一些方法，但没有起作用:上面的代码应该显示水平主菜单，当您将鼠标悬停在其中一个链接上时，链接的颜色会发生变化，并且会出现一个水平子菜单。
html代码：
<div id="menu">
<ul>
<li style="float: left; a:hover; "><a href="acceuil.html" style="color : #CBCAC7 ;">ACCEUIL</a>
浏览 0提问于2012-07-18得票数 1
回答已采纳
我有以下html：
<div id="container">
<ul>
<li>element 1</li>
<li>element 2</li>
</ul>
</div>
应用css，如下所示：
#container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }
所以现在我希望有一个不确定数量的元素(<li>
浏览 0提问于2010-03-13得票数 6
回答已采纳
1回答
我找到了，并在玩它。
请看一下下面的弹琴-
第一个菜单- .menu是一个。
第二个-- .menu2已经被我修改了.
当我把position:relative从-
.menu ul li {
display: block;
position: relative;
float: left;
}
移除float:none -
.menu li:hover li {
float: none;
font-size: 11px;
}
从.menu中，我得到了.menu2，它以水平方式显示下拉列表。
我不明白为什么。我假设简单地删除float:n
浏览 2提问于2014-06-14得票数 1
回答已采纳
2回答
我很难把两个div并排放在一个包装中。我已经阅读了关于如何将两个div并排放置的现有问题和文章；它看起来非常简单，只需定义宽度和浮点数:左用于两个div。但是，我不能让它起作用！
如有任何帮助，将不胜感激！)
下面是JSFiddle：
HTML：
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
浏览 1提问于2016-06-10得票数 2
回答已采纳
这就是两难境地。
<div id="lists-container>
<ul id="list-one"></ul>
<ul id="list-two"></ul>
</div>
我需要在列表中的内容-一个来扩展100%的父div (列表容器)，如果列表-2有内容，我希望两个列表是50%宽度的-floating并排。
发生的情况是list-two最终清除了list-one，而不是向右浮动。有人能帮帮忙吗？这就是我所拥有的：
#list-container{width:600px}
u
浏览 1提问于2010-08-12得票数 1
1回答
我有两个硬币装在一个容器里。两者都有100%和100%的高度。我该如何将那些div并排定位？
我试过float:left和display:inline-block，但似乎没有什么效果。第二个div总是在第一个div之下，而不是并排的
我不想使用绝对位置，我想要一个div飞越。
浏览 2提问于2014-04-15得票数 0
我试图让两个积木并排放在另一个积木中，但我不明白为什么它们不能很好地相邻？
.container {height: 200px; width: 400px; background:darkgrey;}
.left {height: 100%; width: 49.8%; margin: 0 0.2%; background:blue; float:left;}
.right {background:red; height:100%; width: 50%; float:left;}
如果我将边距设置为0.1%，它可以工作，但不能完全对齐右侧。
为什么这不起作用，我是不是漏掉了什么？
使用最新
浏览 0提问于2013-07-10得票数 0
回答已采纳
当存在<form>时，display: inline;失败
它不是并排的。
ul#custom {
float:right;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
#custom li{
display: inline;
}
<ul id="custom"><li>
<form name="form1" method="post" action="checklogin.php"&
浏览 0提问于2009-10-23得票数 1
1回答
背景图像和响应性问题
、、、
我正在使用Magnific并排显示两部分内容；左侧是一个带有背景图像的div，背景图像可以有两种不同的大小，但问题是我很难用响应式的尺寸来填充它们的容器。
目前，我不得不手动设置每一个的宽度和高度，这是我试图避免的。我选择了背景图片，而不是img元素，这样我就可以在手机上显示不同的图片。
我尝试了各种background-size、position和height值，但都无济于事。我想如果我理解了这个问题，我会更幸运地解决它。我假设问题出在图像div的一个容器上。
HTML：
<div class="left-half">
<div class="pop
浏览 0提问于2015-11-20得票数 0
2回答
这是我的密码：
* {
padding:0px;
margin:0px;
}
a {text-decoration:none;}
html,body {height: 100%;}
header {
background:#CCEAF9;
background-image:url('http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}
#
浏览 1提问于2014-05-21得票数 0
回答已采纳
2回答
HTML：
<div id="options">
<ul>
<li>
<label for="input_color">Input Color</label>
<input type="text" id="input_color">
</li>
<li>
<label for="output_co
浏览 0提问于2013-01-28得票数 1
回答已采纳
为什么当我将"#header ul li“设置为左浮动时，黄色条纹(#header)就会消失？？在为"#header ul li“设置了固定大小之后，我希望li元素可以并排坐，而不是更多。3*100 is不够宽，无法覆盖整个页面水平散落的#头。
HTML：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#header {
background: yellow;
}
#header ul {
list-style-type: none;
浏览 6提问于2013-01-11得票数 0
1回答
所以我有这个导航菜单设置，尽管目前CSS的代码。背景色目前主要是为苦行者准备的。我需要在这个设置上有一个背景图像。不幸的是，由于设计规范的原因，这并不是一个真正流畅的背景。这样就可以了。
我需要使这个背景和包含的元素，使导航工作的方式，我希望调整大小根据整体窗口大小。从桌面浏览器到移动设备。
有没有人知道单独使用CSS或者结合jQuery这样的东西来实现这一点呢？我在一些平台上看到过类似的做法，但不知道他们是如何解决这个问题的
/* wrapper and master settings for over all containers */
#menu_bottom{position:abso
浏览 0提问于2013-04-19得票数 0
这可能是一个简单的解决办法，但我正为此绞尽脑汁。我正试图在打开另一个ul的li上盘旋，一旦我在提到的ul中悬停在li上，背景就占据了ul背景的整个宽度。
ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 1000;
}
li {
position: relative;
cursor: pointer;
}
ul>li {
color: #000000;
float: left;
padding: 10px;
height: 22px;
}
ul>li a {
color
浏览 0提问于2017-06-09得票数 0
回答已采纳
我很难把元素堆放在导航栏里。以下是它的外观：
我希望导航元素彼此并排。
这是HTML代码
HTML:
<div id="navbar">
<ul>
<li><a href=".">COMPANY</a>
<ul>
<li><a href=".">OVERVIEW</a></li>
浏览 4提问于2014-02-03得票数 0
回答已采纳
1回答
<!DOCTYPE html>
<html>
<head>
<style>
.filter ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.filter li {
float: left;
}
.filter a:link, .filter a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #
浏览 1提问于2014-12-05得票数 0
回答已采纳
我正在练习CSS，尝试做一个类似于堆栈溢出的设计。
当我不能水平滚动时，顶部的条形看起来很好。当我使窗口尺寸变小时，就会出现水平滚动的功能。当我滚动，它没有显示整个顶部的背景。
全屏：
半个窗口，然后向右滚动：
CSS：
.topbar {
font-size: .8em;
z-index: 1;
text-transform: lowercase;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #222222;
}
.topbar-wrapper
浏览 0提问于2014-12-18得票数 0
回答已采纳
我对html和css非常陌生。我正在尝试建立我的第一个网站。我想要一张图片和导航栏在同一行上，图片在左边。我首先尝试使用一些预先编写的代码来创建下拉导航栏，但我无法将图像定位到它的左侧。我尝试了一些非常基本的代码，但我仍然不知道如何将div (我的图像)放在nav旁边。我不太清楚什么时候该使用position，什么时候该使用float。我的目标很简单。让div和nav并排坐在一起。下面是我用来测试的html：
<!DOCTYPE html>
<html>
<head>
<title>
Nav and div
<
浏览 1提问于2014-01-06得票数 0
回答已采纳
1回答
我想在图标悬停时添加背景颜色并使其更大，但是在此CSS代码上实现:hover的正确方法是什么？
li a i.menu-icon {
color: #f3698a;
float: left;
width: 33px;
font-size: 12px
}
浏览 0提问于2020-08-22得票数 1
2回答
我在格式化DIVs时遇到了一些问题。如果这个问题有点傻的话，我不太喜欢网络。
目前在我的网页，我有一个3div在里面的表单。其中一个位于顶部，另两个并排躺着：
但是，如果底部两个div都设置为容器宽度的50%，则它们将垂直堆叠。如果设定为50%和49%，它们将并驾齐驱，但差距很大：
这里是HTML的简化版本，样式包括在内。
<form id="Form1" style="width:100%">
<div id="Div1">
<table id="Table1&#
浏览 5提问于2017-12-13得票数 0
回答已采纳
2回答
我有两个盒子，每个盒子都有width: 50%;，用float把它们放在一起。一个是白色背景，另一个是灰色背景。
当页面宽度缩小时，方框会彼此靠在一起。在一些最小的尺寸，我不想让盒子变得更小。在这里，它们应该跳到彼此的下面。
他们做得很好。但白色和灰色的方框保持50%的宽度--在这一点上，它们应该100%地填满整个宽度。
就在视频下面。
(最小宽度目前在这里没有任何区别，只是在页面上设置为某个任意值(100px)。)
这种响应效果的正确方式是什么，这样产品在小屏幕上是全尺寸的，但在大屏幕上可以并排？
浏览 1提问于2014-09-08得票数 1
2回答
我正在做分页工作，事实证明这有点挑战性。基本上，分页有一个前一个链接，页面(1，2，3，4)和下一个链接。“上一个”和“下一个”链接都有一个背景图像(方向箭头)。
E.g < Previous Page 1|2|3|4 Next >
我能够得到前面的链接和方向箭头，这是上面定位的背景图像，但不能为下一个链接做同样的事情。
<div class="pagination">
<ul>
<li class="pag
浏览 0提问于2011-07-12得票数 0
回答已采纳
我使用float= left并排放置了两个div元素；但是按钮显示在div元素旁边。我想要按钮元素下面的两个div元素，这是并排放置。
浏览 2提问于2014-02-11得票数 0
我已经用PHP生成了2个HTML表格。第一个表总是在第二个表的顶部。我似乎不能让他们并排在一起。第二张总是在第一张桌子下面。 我还尝试在表格的html中添加了浮动左向左和内联的html样式，但它仍然不能并排出现。任何帮助都将不胜感激！ //add table for bids and asks
function build_table($bidarray){
// start table
$html = '<table style="display: inline-block;">';
// header r
浏览 28提问于2019-04-25得票数 0
回答已采纳
4回答
我试图在蓝色的色带中显示导航项目(水平)。不知何故，背景颜色属性没有被应用到ul元素中。我试着把它放进一个背景为蓝色的div元素中。但是，它不起作用
Html片段，
<div style="background-color:blue;">
<ul style="list-style-type:none;background-color:blue;">
<li style="float:left;margin-right:10px;">cassandra</li>
<li s
浏览 4提问于2015-07-01得票数 3
回答已采纳
4回答
我正在尝试制作一个CSS/javascript下拉菜单(基于。这是可行的。但是我想为我的整个菜单设置一个背景色。我尝试将<ul>放在一个div中，并给这个div一个背景色。然而，当我查看页面时，实际的菜单项并没有出现在div中，而是在它的下面。经过一些实验，我发现这是由于在包含主菜单项的li元素上设置了float: left;造成的。(当然，去掉float: left;意味着菜单项堆叠在一起，而不是并排)。
有人知道怎么解决这个问题吗？
浏览 3提问于2010-12-10得票数 0
回答已采纳
1回答
我试图使页眉和页脚背景为100%，但在页面中的所有内容是1200px和居中的页面。
到目前为止，我在html中放了width:1200px，body确定页面居中，但它固定了背景的宽度，这是我不想发生的。
此外，我一直试图修复导航，以及定位在右边，并对齐到标志。
html,body{
background: #fff;
width: 1200px;
}
.container{
min-height: 100%;
margin: 0 auto;
}
header{
background: #363636;
color: #fff;
p
浏览 0提问于2014-09-28得票数 0
我有这个菜单架构：
<nav>
<ul>
<li><a href="index.asp">home</a></li>
<li><a href="colecao.asp">coleção</a></li>
<li><a href="tecnologia.asp">downloads</a></li>
<li
浏览 0提问于2012-04-11得票数 2
回答已采纳
我最近开始使用UnityandC#，目前正在开发一款垂直2D移动游戏。我正在努力使我的背景与不同的纵横比比例。背景精灵为19,5/9，可玩区域为16/9。目前，背景正在缩放以适应屏幕的顶部和底部，但其想法是将背景固定在屏幕的两侧和底部，并在需要时将背景向上延伸(因此是高大的精灵)。有什么想法吗？提前谢谢。这是我正在尝试的代码，它附在相机上。
public SpriteRenderer background;
private void Start()
{
float screenRatio = (float)Screen.width / (float)Screen.height;
浏览 0提问于2020-05-21得票数 1
回答已采纳
我有这样的代码：
<div class="headmenus">
<ul>
<li><a href="index.php">HOME</a></li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="search.php">COURSES</a></li>
<
浏览 1提问于2014-01-18得票数 1
回答已采纳
ul {
background: #eee;
float: left;
padding: 10px;
margin: 10px;
width: 40%;
list-style: none;
border: 1px solid #333;
}
<ul id = "done">
<li>Laundry</li>
</ul>
<ul>
<li>Garbage Take Out</li>
</ul>
为什么向左浮动ul元素会使我的两个ul元素在浏览
浏览 8提问于2016-01-26得票数 0
回答已采纳
我有网站，我们正在访问的iPhone设备，其中的输入字段显示背景色在结尾，其中重叠的输入字段。
我们已配置为
.digit-group input, .otpdigit-group input {
-webkit-appearance: none !important;
-webkit-border-radius: 0;
-moz-appearance: none !important;
appearance: none !important;
浏览 0提问于2021-03-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
