Php HTML-未将CSS应用于id
我是新手，正在尝试使用Xampp创建一个电子商务网站。我无法按顺序获取内容区域中的项目（请参见图片）我想要什么但我得到了。 index.php中内容区域的代码为：Php HTML-未将CSS应用于id,php,html,css,Php,Html,Css,我是新手，正在尝试使用Xampp创建一个电子商务网站。我无法按顺序获取内容区域中的项目（请参见图片）我想要什么但我得到了。 index.php中内容区域的代码为： <!--content area in pink color--> <div id="content_area"> <div id="products_box">
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<?php getPro(); ?>
</div>
</div>
<!DOCTYPE>
<html>
<head>
<title>My online shop</title>
<link rel="stylesheet" href="styles/style.css" media="all" />
</head>
<body>
<!--Main Container starts here-->
<div class="main_wrapper">
<!--header starts here-->
<div class="header_wrapper">
<img id="logo" src="images/logo.gif" />
<img id="banner" src="images/ad_banner.gif" />
</div>
<!--header ends here-->
<!--Navigation bar starts here-->
<div class="menubar">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">All Products</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Shopping Cart</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="search a product" />
<input type="submit" name="search" value="search" />
</form>
</div>
</div>
<!--Navigation bar ends here-->
<!--Content wrapper starts here-->
<div class="content_wrapper">
<div id="sidebar">
<!--categories-->
<div id="sidebar_title">Categories</div>
<ul id="cats">
<li><a href='#'>Laptops</a></li><li><a href='#'>Cameras</a></li><li><a href='#'>Mobiles</a></li><li><a href='#'>Tablets</a></li><li><a href='#'>media players</a></li><li><a href='#'>Ebook readers</a></li><li><a href='#'>Graphic tablets</a></li>
</ul>
<!--Brands-->
<div id="sidebar_title">Brands</div>
<ul id="cats">
<li><a href='#'>HP</a></li><li><a href='#'>DELL</a></li><li><a href='#'>LG</a></li><li><a href='#'>Samsung</a></li><li><a href='#'>Apple</a></li><li><a href='#'>Motorola</a></li><li><a href='#'>Xiamoi</a></li><li><a href='#'>Huawei</a></li><li><a href='#'>Blackberry</a></li><li><a href='#'>HTC</a></li> </ul>
</div>
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<div class='single_product'>
<h3>Moto G5 Plus (Lunar Grey, 32 GB)</h3>
<img src='admin_area/product_images/motorola-moto-g5-plus-1.jpg' width='180' height='180' />
<p><b>₹ 15999</b></p>
</div>
<div class='single_product'>
<h3>xiamoi redmi note 3</h3>
<img src='admin_area/product_images/Redmi-Note3-32GB-SDL881680011-2-1b99d.jpg' width='180' height='180' />
<p><b>₹ 9999</b></p>
</div>
<div class='single_product'>
<h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
<img src='admin_area/product_images/Dell Vostro 15 3558 15.6-inch Laptop.jpg' width='180' height='180' />
<p><b>₹ 28000</b></p>
</div>
<div class='single_product'>
<h3>Iphone 6 (32 GB)</h3>
<img src='admin_area/product_images/SP705-iphone_6-mul.png' width='180' height='180' />
<p><b>₹ 30000</b></p>
</div>
</div>
</div>
</div>
<!--Content wrapper ends here-->
<div id="footer">
<h2 style="text-align:center; padding-top:30px;">© 2017 by Technohub
</div>
</div>
<!--Main Container ends here-->
</body>
</html>
我的网上商店
类别
品牌
Moto G5 Plus（月灰，32 GB）
₹ 15999
夏莫伊红密注3
₹ 9999
戴尔Vostro 15 3558 15.6英寸笔记本电脑
₹ 28000
iPhone6（32 GB）
₹ 三万
&抄袭；2017年由Technohub发布
请详细解释，因为我是新手您多次使用同一ID ID必须是唯一的 因此，请改用类 使用类似于
.single_product{
float:left;
margin-left:20px;
padding:10px;
}
问题编辑后回答
- 下面是使用flexbox改进的代码
产品包装盒{
显示器：flex；
柔性包装：包装；
最大宽度：780px；
证明内容：中心；
文本对齐：居中；
/*演示*/
背景：粉红色
}
.单一产品{
填充：10px；
}
Moto G5 Pluspl（月灰，32 GB）
₹ 15999
夏莫伊红密注3
₹ 9999
戴尔Vostro 15 3558 15.6英寸笔记本电脑
₹ 28000人
iPhone6（32 GB）
₹ 30000人
.single_product{
float:left;
margin-left:20px;
padding:10px;
}
问题编辑后回答
- 下面是使用flexbox改进的代码
产品包装盒{
显示器：flex；
柔性包装：包装；
最大宽度：780px；
证明内容：中心；
文本对齐：居中；
/*演示*/
背景：粉红色
}
.单一产品{
填充：10px；
}
Moto G5 Pluspl（月灰，32 GB）
₹ 15999
夏莫伊红密注3
₹ 9999
戴尔Vostro 15 3558 15.6英寸笔记本电脑
₹ 28000人
iPhone6（32 GB）
₹ 30000人
供将来参考：
一个问题是，您正在使用相同的
id生成多个
元素。这不是合法的HTML5，id
s在文档中必须是唯一的，请改用类
，一个问题是您正在使用相同的id
生成多个
元素。这不是合法的HTML5，id
s在文档中必须是唯一的，请使用类
，试试看，给我一分钟。我会得到同样的结果：遗憾的是，它也不起作用。我得到了同样的结果。我认为问题在于其他部分，而不是“#产品盒”和“.单一产品”。请您最后一次尝试一下。根据当前输出，您只需要更改CSS，这意味着您不需要更改PHP，PHP很好，只需复制粘贴CSS，如果这不起作用，那么问题是您有其他CSS覆盖它是的，我上次也只更改了CSS。我想你是对的，一些其他CSS覆盖了它。试试看，给我一分钟。我会得到同样的结果：遗憾的是，它也不起作用。我得到了同样的结果。我认为问题在于其他部分，而不是“#产品盒”和“.单一产品”。请您最后再试一次。对于当前输出，您只需要更改CSS，这意味着您不需要更改
.single_product{
float:left;
margin-left:20px;
padding:10px;
}