Question

我的div中有浮动按钮的问题。一旦我在按钮上设置浮动属性，它不仅会向左/向右移动，而是稍微改变位置并向上移动，这不是我想要的......

这是我正在做的事情

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
<div style="background-color:blue">
    <h1>
    Some header text
    </h1>
</div>
<div style='flex:1;background-color:red'>
  <div style='display:block; vertical-align:middle'>
     <button style="height:24px;">
         Some stuff
       </button>
     <button style="height:40px">
       Other stuff
     </button>
  </div>

</div>

按钮必须位于标题文本后将增长到最大空间的容器中。现在我希望第一个较小的按钮靠近标题，而右边的大按钮就像这样

http://jsfiddle.net/o1u1cLbm/3/

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
    <div style="background-color:blue">
        <h1>
        Some header text
        </h1>
    </div>
    <div style='flex:1;background-color:red'>
      <div style='display:block; vertical-align:middle'>
         <button style="height:24px;float:left">
             Some stuff
           </button>
         <button style="height:40px;float:right">
           Other stuff
         </button>
      </div>

    </div>
</div>

正如您在向按钮添加浮动属性后所看到的那样，它不再位于父div的中心，而是附加到顶部。

如何只使用css浮动按钮而不改变垂直位置？

Answer 1

而不是inline-block只需将div设为灵活容器：

display: flex;
align-items: center;
justify-content: space-between;

justify-content: space-between让您了解浮动的效果 - 请参阅下面的演示：

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
  <div style="background-color:blue">
    <h1>
      Some header text
    </h1>
  </div>
  <div style='flex:1;background-color:red'>
    <div style='display: flex;
    align-items: center;
    justify-content: space-between;'>
      <button style="height:24px;">
             Some stuff
           </button>
      <button style="height:40px">
           Other stuff
         </button>
    </div>

  </div>
</div>

Answer 2

如果您使用display: flax;不需要在亚麻中使用浮动，那么可以在JS Fiddle中找到解决方案here本地解决方案

Answer 3

不需要interface XInput { xin: number; } interface XOutput { xout: number; } interface YInput { yin: number; } interface YOutput { yout: number; } type DictionaryFunction<T> = { [P in keyof T]: { parameter: any; returns: any; } } class MethodDictionary<M extends DictionaryFunction<M>> { private _methods: any = {}; define<N extends keyof M>(name: N, fn: (a: M[N]['parameter']) => M[N]['returns']) { this._methods[name] = fn; } call<N extends keyof M>(name: N, input: M[N]['parameter']) { this._methods[name](input); } } interface FMap { getX: { parameter: XInput, returns: XOutput }; getY: { parameter: YInput, returns: YOutput, }; } const mapper = new MethodDictionary<FMap>(); mapper.define('getX', (a: XInput): XOutput => { return { xout: 0 }; }); mapper.call('getX', { xin: 0 });，您可以使用floats，然后使用margin-left:auto上传flexbox

flex-item

或者您可以使用<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'> <div style="background-color:blue"> <h1> Some header text </h1> </div> <div style='flex:1;background-color:red'> <div style='display:flex;align-items:center;'> <button style="height:24px;"> Some stuff </button> <button style="height:40px;margin-left:auto;"> Other stuff </button> </div> </div> </div> justify-content: space-between;

to flex-container

Answer 4

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
    <div style="background-color:blue">
        <h1>
        Some header text
        </h1>
    </div>
    <div style='flex:1;background-color:red'>
      <div style='display: flex; align-items: center; justify-content: space-between;'>
         <button style="height:24px;">
             Some stuff
           </button>
         <button style="height:40px;">
           Other stuff
         </button>
      </div>
      
    </div>
</div>

为什么浮动我的按钮

4 个答案: