float：left和float：right divs（block）不适合一行

时间：2016-06-30 10:20:06

标签： html css

我想创建嵌套菜单。某些菜单项具有快捷键，我尝试将其放在同一行但与右侧对齐。 我尝试使用左/右浮动，但我有放置快捷方式的问题，他们转移到下一行。我该如何解决这个问题？

您可以在此处查看代码：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

6 个答案:

答案 0 :(得分：4)

您可以使用flexbox代替floating，例如以下代码：

  1. 将display:flex添加到父级。
  2. 将margin-left: auto添加到.menu-item-shortcut
  3. 从子项中删除float属性。

    4. ＆＃13;
    ＆＃13; 
    .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;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    参考答案：https://stackoverflow.com/a/22429853/863110

    Can I use flexbox

答案 1 :(得分：1)

解决方案1 ​​ - 文字溢出

如果你想保持浮动选择更大的宽度和/或给标签一个最大宽度（在你的情况下是88px）和文本溢出：

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

＆＃13;
＆＃13; 
.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;
 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

解决方案2 - 有保证金

如果您知道快捷方式跨度的最大宽度是多少，您可以将此值指定给标签的右边距，并将快捷方式的位置更改为绝对：

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

通过这种方式，您可以保留整个文本。

答案 2 :(得分：0)

请不要误会我的意思，但你的问题听起来像是＆＃34;我如何在一只鞋子中得到两只脚，而不会撕裂......＃/ p>

  1. 你必须增加鞋子的尺寸。
  2. 或者你需要减小脚的​​大小。

    3. 因此，就代码而言，您必须谨慎设置容器div .menu-item-container的大小（特别是因为孩子们浮动），或者您需要设置最大值＆＃34; 长文本的宽度，用于搞砸快捷方式＆＃34;因此，不是将其他元素向下推，而是自己切换到新的一行。

答案 3 :(得分：0)

.menu-item-container {
  width: 200px;
}
.menu-item-label {
  float:left;
  position: relative;
  width: 105px;
  display: block;
  overflow: hidden;
}

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

答案 4 :(得分：0)

试试这个你给出的代码如下： - <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">

请为顶部更改样式： - 

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

changed Jsfiddle

答案 5 :(得分：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>
相关问题
最新问题