同一类的所有跨度应具有相同的宽度并保持悬停答案

【问题标题】：all span of same class should have equal width and remain on hover同一类的所有跨度应具有相同的宽度并保持悬停
【发布时间】：2018-03-21 23:40:21
【问题描述】：

我的 css 不太好，所以需要你的帮助。
我对display: block; display: inline; 尝试了太多，但不明白如何修复这个设计

.mainmenu{
    -moz-border-radius:10px 10px 10px 10px; 
    border-radius:10px 10px 10px 10px;  
    display: block;
    padding:1px;
    border:1px solid #021a40;
    background-color:#FFFFFF;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color:black;
}
.mainmenu:hover{
    display: block;
    padding:2px;
    border:1px solid #021a40;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
    color:highlight;
    box-shadow: 10px 10px 5px #888888;
}

http://fiddle.jshell.net/FKLfQ/6/

【问题讨论】：

不要重复ID。您在 span 标签上重复 #mainmenu
“但无法理解如何修复此设计”什么设计..？除非您解释或提供图像或其他内容，否则我们怎么知道预期的设计是什么……：s
@TJ 我已经提供了小提琴链接
习惯了这个fiddle.jshell.net/FKLfQ/13

标签： html css hover width

【解决方案1】：

将此添加到您的 CSS：

#navigation {
    display:table;
}
span {
    display: block;
    width:100%;
}

DEMO

这占用了最大跨度的宽度，就是所有其他的宽度，当内容改变时是动态的。

【讨论】：

悬停时宽度似乎是恒定的。也许你的意思是跨度的位置？这是由于 :hover 中的填充。检查我更新的小提琴。

【解决方案2】：

将您的 CSS 设置为：

.mainmenu{
    -moz-border-radius:10px 10px 10px 10px;  /* rounds corners for firefox */
    border-radius:10px 10px 10px 10px;  /* rounds corners for other browsers */
    display: block;
    padding:1px;
    border:1px solid #021a40;
    background-color:#FFFFFF;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color:black;
    width:250px;  /* ADD THIS */
    display:block;/* ADD THIS */
}

然后根据您的喜好指定width。

在您的小提琴中，所有span 元素都具有相同的ID。 ID 必须是唯一的

DEMO

【讨论】：

【解决方案3】：

您必须指定width 属性，因此跨度可以相等；其次，您以错误的方式拥有comments。在 CSS 注释中应该是这样的：

/* Comments should appear like it */

检查 DEMO。

【讨论】：

【解决方案4】：

首先//在CSS中不是一个有效的注释，cmets应该在/* */里面。因此，未应用以下规则。然后你只需要申请display:inline-block 和一个共同的宽度。

.mainmenu{
    -moz-border-radius: 10px 10px 10px 10px;  /* Rounds corners for Firefox */
    border-radius: 10px 10px 10px 10px;  /* Rounds corners for other browsers */
    display: inline-block;
    width: 100px;
    padding: 1px;
    border: 1px solid #021a40;
    background-color: #FFFFFF;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: black;
}

JSFiddle

【讨论】：

【解决方案5】：

对于导航，您可以使用列表而不是跨度

html

<nav>
   <ul>
      <li class="your-class"><a href="#">Item1</a></li>
      <li class="your-class"><a href="#">Item2</a></li>
      <li class="your-class"><a href="#">Item3</a></li>
      <li class="your-class"><a href="#">Item4</a></li>
   </ul>
</nav>

css

.your-class{
   display: inline-block; // In 1 line
   width:250px; // Same width
}

还有：您只能使用一次 ID，它被称为某物的标识符。类是为了重用。

【讨论】：

【解决方案6】：

测试这段代码：

.mainmenu{
    -moz-border-radius: 10px 10px 10px 10px;  // Rounds corners for Firefox
    border-radius: 10px 10px 10px 10px;  // Rounds corners for other browsers
    display: block;
    padding: 1px;
    border: 1px solid #021a40;
    background-color: #FFFFFF;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: black;
    position: absolute;
    margin-bottom: 10px;
    width: 100%;
}
.mainmenu:hover{
    display: block;
    padding: 2px;
    border: 1px solid #021a40;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
    color: highlight;
    box-shadow: 10px 10px 5px #888888;
}

【讨论】：