如何添加相同的 CSS 类来更改宽度

【问题标题】：How To Add Same CSS Class To Change A Width如何添加相同的 CSS 类来更改宽度
【发布时间】：2014-05-31 00:46:14
【问题描述】：

我的网站有问题。我不明白为什么要编写 CSS 代码来控制整个菜单下拉菜单。

如果我将 css 类宽度设置为 none; 它会将品牌类别下拉列表的对齐方式设置为正确的 2 列 5 行格式。但它让类别下拉列表中的产品图像相互叠加。

但是！！当我将其设置为；

       .menu .col_1 {
width: 200px;

 }

这搞砸了品牌类别的格式，应该是 2 列 + 5 行。

我应该在 CSS 文件中编写什么代码来更改它？

该网站是 ;

.menu-box {
background: none no-repeat scroll 0 0 #000000;
border-top: 1px solid #999999;
/*    clear: both;*/
float: left;
margin-top: 1px;
position: relative !important;
}
.menu {
font-size: 12px;
list-style: none;
width: 960px;
}
.menu li {
float: left;
text-align: center;
position: relative;
padding: 5px 10px 1px;
color: #FFF;
height: 45px;
}
.menu li div li {
height: auto;
}
.menu li:hover {
z-index: 2;
cursor: pointer;
background: none no-repeat scroll 0 0 #888;
    }
.menu li small {
color: #F5F5F5;
display: block;
font-size: 12px;
text-transform: lowercase;
/*line-height: 10px;*/
}
.menu li a {
padding-top: 2px;
color: #FAFAFA;
outline: 0 none;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
display: block;
font-weight: bold;
}
.menu li:hover a {
color: #FFF;
}
.menu li div span {
color: #000000;
cursor: default;
font-size: 14px;
letter-spacing: 0.5px;
font-weight: bold;
text-transform: uppercase;
}
.menu li div a {
font-weight: normal;
text-transform: none;
}
.menu li.sales div span {
color:#E7160F;
}
.menu li div span.subtitle {
padding-left: 8px;
}
.menu li .drop {
padding-right: 21px;
}
.menu li.home {
background: url("../images/cdd_btnhome.png") no-repeat scroll 20px 10px transparent;
border-right: 1px solid #FFC24F;
display: inline-block;
padding-left: 20px;
padding-right: 20px;
width: 30px;
}
.menu li.home:hover {
background: url("../images/cdd_btnhome.png") no-repeat scroll 20px 10px #888;
}
/*.menu li.sales {
background: #000000;
}*/
.menu li.sales:hover {
background: #E7160F;
}
/*.menu li.sales a {
color: #FFFFFF;
}*/
.menu li.sales a:hover {
color: #FFFFFF;
}
.menu li.sales ul li a:hover {
color: #E7160F;
}
.menu li.support:hover {
background: #888;
}
.menu li.support {
/*background: #000000;*/
padding-right: 20px;
padding-left: 29px;
}
/*.menu li.support a {
color: #FFFFFF;
}*/
.menu li.support a:hover {
color: #FFFFFF;
}
.menu li.support ul li a:hover {
color: #000000;
}
.menu li:hover .drop {
padding-right: 21px;
background: none;
}
.menu li:hover div a {
color: #666;
font-size: 12px;
padding: 0 0 0 8px;
}
.menu li:hover div a:hover {
background: #EEEEEE;
}
.menu li ul li a:hover {
color: #000000;
}
/* Right aligned menu item */
.menu .right {
border: none;
float: right;
right: 0;
margin-right: 0;
}
.menu .support {
border: medium none !important;
float: right;
margin-right: 0;
right: 0;
}
/**************** Flyout Menu */
/* Left & right aligned common styles */
.menu .dropdown_1columns,
.menu .dropdown_2columns,
.menu .dropdown_3columns,
.menu .dropdown_4columns,
.menu .dropdown_5columns {
margin: 4px auto;
left: -999em;
position: absolute;
background: #FFFFFF;
-moz-box-shadow: 0 3px 6px -3px #999;
-webkit-box-shadow: 0 3px 6px -3px #999;
box-shadow: 0 3px 6px -3px #999;
border: 10px solid #888;
padding: 10px;
text-align: left;
cursor: default;
}
.menu .dropdown_1columns_sales,
.menu .dropdown_2columns_sales,
.menu .dropdown_3columns_sales,
.menu .dropdown_4columns_sales,
.menu .dropdown_5columns_sales {
margin: 4px auto;
left: -999em;
position: absolute;
background: #FFFFFF;
-moz-box-shadow: 0 3px 6px -3px #999;
-webkit-box-shadow: 0 3px 6px -3px #999;
box-shadow: 0 3px 6px -3px #999;
border: 10px solid #E7160F;
padding: 10px;
text-align: left;
cursor: default;
}
.menu .dropdown_1columns_support {
background: #FFFFFF;
border: 10px solid #888;
padding: 10px;
margin: 4px auto;
position: absolute;
left: -999em;
text-align: left;
-moz-box-shadow: 0 3px 6px -3px #999;
-webkit-box-shadow: 0 3px 6px -3px #999;
box-shadow: 0 3px 6px -3px #999;
cursor: default;
}
/*.level1 {
border-bottom: 1px dashed #DDDDDD;
}*/
/* Drop Downs Sizes */
*/.menu .dropdown_1columns_sales {
width: 169px;
}
.menu .dropdown_2columns_sales {
width: 368px;
}
.menu .dropdown_3columns_sales {
width: 500px;
}
.menu .dropdown_4columns_sales {
width: 670px;
}
.menu .dropdown_5columns_sales {
width: 920px; /*765px;*/
}
.menu .dropdown_1columns_support {
width: 176px;
}
/* Showing Drop Down on Mouse Hover - Left aligned */
.menu li:hover .dropdown_1columns_sales,
.menu li:hover .dropdown_2columns_sales,
.menu li:hover .dropdown_3columns_sales,
.menu li:hover .dropdown_4columns_sales,
.menu li:hover .dropdown_5columns_sales {
left: 0;
top: 43px;
}
.menu li:hover .dropdown_1columns_support {
left: 0;
top: 43px;
}
/* Drop Downs Sizes */
.menu .dropdown_1columns {
width: 169px;
}
.menu .dropdown_2columns {
width: 368px;
}
.menu .dropdown_3columns {
width: 500px;
}
.menu .dropdown_4columns {
width: 670px;
}
.menu .dropdown_5columns {
width: 920px; /*765px;*/
}
/* Showing Drop Down on Mouse Hover - Left aligned */
.menu li:hover .dropdown_1columns,
.menu li:hover .dropdown_2columns,
.menu li:hover .dropdown_3columns,
.menu li:hover .dropdown_4columns,
.menu li:hover .dropdown_5columns {
left: 0;
top: 43px;
}
/* Showing Drop Down on Mouse Hover - Right aligned */
.menu li .align_right {
}
.menu li:hover .align_right {
left: auto;
right: 0;
top: 43px;
}
.menu li .align_right_support {
}
.menu li:hover .align_right_support {
left: auto;
right: 0;
top: 43px;
}
/* Columns Sizes */
.menu .col_1,
.menu .col_2,
.menu .col_3,
.menu .col_4,
.menu .col_5 {
display: inline;
float: left;
position: relative;
/*margin: 0 0 10px;*/
min-height: 60px;
padding: 0 15px 0 0;
}
.menu .col_1_support {
display: inline;
float: left;
position: relative;
/*margin: 0 0 10px;*/
min-height: 60px;
padding: 0 15px 0 0;
}
.menu .col_1_support {
width: 177px;
}
.menu .col_1 {
width: 200px;

}
.menu .col_2 {
width: 368px;
}
.menu .col_3 {
width: 500px;
}
.menu .col_4 {
width: 670px;
}
.menu .col_5 {
width: 920px;
}
/* IMPORTANT */
/* Use the firstcolumn class for the items that stick to the left edge of the dropdown         */
.menu .firstcolumn {
margin-left: 0; /* Clearing margin & left */
clear: left;
border-right: medium none;
}
/**************** Flyout Menu Content */
.menu p,
.menu ul,
.menu li,
.menu h2,
.menu h3 {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 18px;
text-align: left;
}
.menu li.right {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
line-height: 21px;
text-align: right;
/*border-right: 1px solid #FFC24F;*/
}
.menu .col_1_support ul {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
line-height: 21px;
text-align: left;
/*border-right: 1px solid #FFC24F;*/
}
.menu .col_1_support li.divider {
background: url("../images/cdd_hr.gif") repeat-x scroll left top transparent;
/*border-right: 1px solid #FFC24F;*/
}
.menu .col_1_support li.divider {
height: 1px;
margin: 10px 0;
}
.menu p {
color: #999999;
font-size: 12px;
line-height: 18px;
margin-bottom: 10px;
}
.menu .strong {
font-weight: bold;
}
.menu .italic {
font-style: italic;
}
.menu h2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
letter-spacing: -1px;
font-size: 21px;
line-height: 21px;
margin-top: 7px;
margin-bottom: 14px;
padding-bottom: 14px;
}
.menu h3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 21px;
margin-top: 7px;
margin-bottom: 14px;
padding-bottom: 7px;
}
.menu .pusher {
/* Use this pucher if you want to give more vertical spacing between your rows of     content */
margin-top: 18px;
}
/* Images styles */
.menu .imgshadow_light {
/* Better style on light background */
background: #FFFFFF;
padding: 4px;
border: 1px solid #999999;
margin-top: 5px;
}
.menu .img_left {
/* Image sticks to the left */
width: auto;
float: left;
margin: 2px 15px 15px 0;
}
.menu .img_right {
/* Image sticks to the right */
width: auto;
float: right;
margin: 2px 0 15px 15px;
}
/* Standard lists styles */
.menu li ul {
list-style: none;
padding: 0;
margin: 0 0 12px 0;
}
.menu li ul li {
font-size: 12px;
line-height: 18px;
position: relative;
padding: 0;
margin: 0;
float: left;
text-align: left;
width: 169px;
}
.menu li ul li:hover {
background: none;
padding: 0;
margin: 0;
}
/* 2-Levels Flyout */
.menu .levels {
list-style: none;
margin: 0;
padding: 0;
width: auto;
}
.menu .levels li li,
.menu .levels li li:hover {
width: 150px;
padding: 0 12px 0 12px;
margin: 0 0 0 1px;
}
.menu .levels ul {
/* First level Flyout */
position: absolute;
z-index: 500;
top: -23px;
left: 100%;
display: none;
width: 180px;
background: #FFFFFF;
margin: 15px 0 0 0;
padding: 6px 0 6px 0;
}
.menu .levels ul ul {
top: -6px;
left: 100%;
width: 180px;
margin: -1px 0 0 0;
}
.menu li.position-right-li {
border-right: 1px solid #FFC24F;
position: static;
}
.menu li:hover div.position-right {
position: absolute;
right: 0;
left: auto;
top: 47px;
}
.menu .levels li:hover {
cursor: pointer;
z-index: 100;
}
.menu .levels li:hover ul ul,
.menu .levels li li:hover ul ul {
display: none;
}
.menu .levels li:hover ul,
.menu .levels li li:hover ul {
display: block;
}
.menu form {
margin: 0 0 12px 0;
padding: 0;
}

【问题讨论】：

    标签： jquery html css magento magento-1.7


    【解决方案1】：

    这些列表上是否有任何填充或边距？如果是这样，您需要为该行的最后一项创建一个类似 .last 的类，并将填充或边距设置为 0

    【讨论】：

    • 这就是 menu.css 文件的大部分内容。边距设置为零，您可以编写代码如何格式化以添加到该 CSS 文件中吗？
    • 能否请您做一个 jsfiddle 或者提供页面链接以便我可以找到您？
    • 当您的鼠标悬停在菜单上时，它就在我网站的索引上。请向上滚动到我的问题以查找页面。
    • .menu li.last { padding: 5px 0 1px } 并为最后一项应用 class .last
    • 如果你能告诉我代码的外观会很有帮助，因为我是用萤火虫随机复制和粘贴你在不同区域给我的代码，但它不起作用。
    【解决方案2】：

    您的外部 div 'dropdown_5columns' 的宽度为 920 像素。

    您正在尝试在其中放置 5 x 200 像素...这太大了。 如果您指定： .menu .col_1 { width: 160px; } 他们会很好地适应那里。

    【讨论】：

    • 是的，你是对的，但我正在尝试整合 160 像素和 200 像素，因为 160 像素会搞砸旁边的另一个菜单。
    • 确实如此，但您正在尝试使用完全相同的 css 规则制作 4 列和 5 列布局。您将不得不以某种方式区分它们。你有一个类 'dropdown_5columns'，为什么不创建一个类 dropdown_4columns 并将其设置为 200px 宽度？
    • 如果我有一个好的程序员我能理解你在告诉我什么。我是个该死的菜鸟。我买了这个主题，我是 SEO 专家。我一无所知。
    • 你为什么不详细说明你的答案！
    【解决方案3】：

    我会尝试一下：在您提出问题的 CSS 文件的最后，我建议您添加以下代码：

    .menu li ul li {
    width: inherit;
}

.menu .col_1 {
    min-width: 0px;
}
ul.menu > li > div > div > ul > li div.slideshow-box > ul {
    width: 924px;
    position:relative;
    left:-12px;
}
ul.menu > li > div > div > ul > li div.slideshow-box > ul > li.item {
    display: inline;
    float: inherit;
}
.slideshow-box > ul > li.item > div > div.item-box {
    margin-left: 12px;
}

    它会更改宽度设置，使宽度完全不受限制，内容将根据需要占用尽可能多的宽度。然后它为带有大产品布局框的菜单添加了额外的布局，使它们排成一行。

    ***编辑 我在上面的部分中添加了更多的 CSS 和一些注释，但说真的，我认为你应该聘请了解更多 CSS 和 HTML 的人加入，否则你可能会发现在 Magento 中设置商店是一个非常漫长而痛苦的过程。

    【讨论】：

      猜你喜欢
      • 2016-11-28
      • 2014-03-15
      • 2015-05-13
      • 2018-12-14
      • 1970-01-01
      • 2021-04-06
      • 2014-04-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode