logo标签列表

左浮动和右浮动的块元素无法在同一行上对齐。

htmlcss
3
我希望创建嵌套菜单。一些菜单项具有快捷键，我尝试将它们放在同一行并靠右对齐。 我尝试使用左/右浮动实现，但是我在放置快捷方式时遇到了问题，它们被移至下一行。我该如何解决它？
您可以在此处查看代码： 

.menu-item-container {}

.vert-menu {
  position: absolute;
  min-width: 180px;
  border: #aaa 1px solid;
  background: white;
}

.menu-item-vert {
  float: none;
}

.menu-item {
  font: 13px Arial, sans-serif;
  height:13px;
  color: black;
  padding: 3px 7px 5px 7px;
  white-space: nowrap;
  position: relative;
  background: white;
}

.menu-item-shortcut {
  float: right;
  padding: 0px 0px 0px 24px;
  position: relative;
  color: #777;
  left: auto;
  right: 5px;
  direction: ltr;
  text-align: right;
}

.menu-item-label {
  float:left;
  position: relative;
}
<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
  <div class="menu-item menu-item-vert">
    <span class="menu-item-label">New...</span>
    <span class="menu-item-shortcut">Ctr+N</span>
  </div>
  <div class="menu-item menu-item-vert">
    <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label">File</span>
        <span class="menu-item-shortcut">Alt+ F</span>
      </div>
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label">Long text that screws up the shortcut</span>
        <span class="menu-item-shortcut">Shift+Del</span>
      </div>
    </div>
    <span class="menu-item-label">Add</span>
    <span class="menu-item-shortcut">▶</span>
  </div>
</div>

https://jsfiddle.net/meqe4318/8/

6个回答
4

你可以使用 flexbox 来代替下面代码中的 floating:

  1. 为父元素添加 display:flex。
  2. 为 .menu-item-shortcut 添加 margin-left: auto。
  3. 删除子元素的 float 属性。

.menu-item-container {}

.vert-menu {
  position: absolute;
  min-width: 180px;
  border: #aaa 1px solid;
  background: white;
}

.menu-item-vert {
  float: none;
  display:flex;
}

.menu-item {
  font: 13px Arial, sans-serif;
  height:13px;
  color: black;
  padding: 3px 7px 5px 7px;
  white-space: nowrap;
  position: relative;
  background: white;
}

.menu-item-shortcut {
  /*float: right;*/
  padding: 0px 0px 0px 24px;
  position: relative;
  color: #777;
  left: auto;
  right: 5px;
  direction: ltr;
  text-align: right;
  margin-left: auto;
}

.menu-item-label {
  /*float:left;*/
  position: relative;
}
<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
  <div class="menu-item menu-item-vert">
    <span class="menu-item-label">New...</span>
    <span class="menu-item-shortcut">Ctr+N</span>
  </div>
  <div class="menu-item menu-item-vert">
    <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label">File</span>
        <span class="menu-item-shortcut">Alt+ F</span>
      </div>
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label">Long text that screws up the shortcut</span>
        <span class="menu-item-shortcut">Shift+Del</span>
      </div>
    </div>
    <span class="menu-item-label">Add</span>
    <span class="menu-item-shortcut">▶</span>
  </div>
</div>

参考答案：https://dev59.com/yWEh5IYBdhLWcg3waC5t#22429853

我能使用flexbox吗？

谢谢!!! 它在flexbox中运行良好。但我还想知道是否存在使用float或inline/inline-block的解决方案？ - EdSv
浏览器在宽度未指定且取决于内容的情况下，如何计算块的宽度？我对 div 元素和嵌套 div 元素的宽度计算不同感到有些困惑。也许有一篇好文章可以提供链接解答这个问题。 - EdSv
@EdSv 很高兴听到这个好消息 :) 评论1：我不这么认为。也许可以使用 display:table-cell。评论2：宽度计算取决于样式。如果div具有相同的样式，则无关紧要。您可以阅读更多关于“浮动”的信息：https://css-tricks.com/all-about-floats/ 和“显示”：https://css-tricks.com/almanac/properties/d/display/。 - Mosh Feu
@EdSv，那么，有什么想法吗？ - Mosh Feu
2

SOLUTION 1 - 使用text-overflow

如果你想保留浮动，请选择更大的宽度和/或给标签一个最大宽度（在你的情况下是88像素），并使用text-overflow属性：

.menu-item-label {
    ..
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 88px;
}


.menu-item-container {}

.vert-menu {
  position: absolute;
  min-width: 180px;
  border: #aaa 1px solid;
  background: white;
}

.menu-item-vert {
  float: none;
 }

.menu-item {
  font: 13px Arial, sans-serif;
  height:13px;
  color: black;
  padding: 3px 7px 5px 7px;
  white-space: nowrap;
  position: relative;
  background: white;
 }

.menu-item-shortcut {
  float: right;
  padding: 0px 0px 0px 24px;
  position: relative;
  color: #777;
  left: auto;
  right: 5px;
  direction: ltr;
  text-align: right;
}

.menu-item-label {
  float:left;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
 }
<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
  <div class="menu-item menu-item-vert">
  <span class="menu-item-label">New...</span>
  <span class="menu-item-shortcut">Ctr+N</span>
  </div>
  <div class="menu-item menu-item-vert">
    <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
      <div class="menu-item menu-item-vert">
      <span class="menu-item-label">File</span>
      <span class="menu-item-shortcut">Alt+ F</span>
      </div>
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label" title="Long text that screws up the shortcut">Long text that screws up the shortcut</span>
        <span class="menu-item-shortcut">Shift+Del</span>
     </div>
    </div>
    <span class="menu-item-label">Add</span>
    <span class="menu-item-shortcut">▶</span>
    </div>
</div>

解决方案2 - 带有外边距

如果您知道快捷方式跨度所占用的最大宽度，可以将此值分配给标签的margin-right，并将快捷方式的位置更改为absolute：

.menu-item-shortcut {
    ..
    position: absolute;
}
.menu-item-label {
    ..
    margin-right: 70px;
}

这样您就可以保存整个文本。

0

请不要误解我的意思，但你的问题听起来像是“我怎样才能把两只脚放进同一只鞋里，而不会撑破它”。

  1. 要么你必须增加鞋子的尺寸。
  2. 要么你需要减小脚的尺寸。

所以就你的代码而言，要么你必须谨慎地设置容器 div 的大小 .menu-item-container（特别是因为子元素是浮动的），要么你需要为“长文本，它会破坏快捷方式”设置一个最大宽度，这样它就不会推动其他元素向下，而是自己换行。

我不想为 .menu-item-container 设置宽度，我需要根据内容进行调整。就尺寸而言，即使只有一只鞋子，它也不会太大，而且如果我们将长内容“Long text that screws up the shortcut”复制并放入外部菜单中而不是“添加”或“新建...”，调整也会发生！因此问题不在长度上。 - EdSv
0
.menu-item-container {
  width: 200px;
}
.menu-item-label {
  float:left;
  position: relative;
  width: 105px;
  display: block;
  overflow: hidden;
}

已更新您的https://jsfiddle.net/meqe4318/14/

0

尝试使用您提供的代码，例如： <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">

请更改 top 的样式：

<div class="menu-item-container vert-menu" style="top: -22px; display: inline; left: 180px;">

更改后的 Jsfiddle

0
<div class="nav-container">
<ul class="nav-main">
<li><a href="#">nav 1<span class="arrow">&nbsp;</span></a>
<ul class="child">
<li><a href="#">nav child 1</a>
</li>
</ul>
</li>
</ul>
</div>
<style type="text/css">
body {height:100%; margin:0; padding:0;}
a {color:#ffffff; display:block; padding:5px 10px; text-decoration:none;}
img {max-width:100%;}
.nav-container {padding:15px;}
.nav-main {display:block; list-style:none; margin:0; padding:0;}
.nav-main > li {background:#000000; position:relative; width:200px;}
.nav-main > li:hover ul.child {display:block;}
span.arrow {background-image:url("http://www.iconsdb.com/icons/preview/gray/arrow-37-xxl.png"); background-position:right center; background-repeat:no-repeat; background-size:100% auto; height:14px; position:absolute; right:2px; top:8px; width:14px; z-index:9;}
ul.child {left:100%; margin:0; padding:0; position:absolute; top:0; width:200px; display:none;}
.child > li {background:#ff0000;}
</style>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接