具有可变X位置的按钮不应位于徽标上

Question

我的标题中有两个带有变量X位置的按钮，如下所示：

但是如果用户将浏览器窗口的大小调整到太小的宽度，那么＆＃34; A＆＃34;和＆＃34; B＆＃34;按钮出现在徽标上（如第三个例子）。我怎么能避免这种情况？

P.S。对不起，如果我的英语不太好

Answer 1

你应该在div中插入徽标，然后从css中取出他的位置并将其浮动到左边，然后你应该对按钮做同样的事情。我在那里为你做了一个例子，也许你也可以设置一个最小宽度

http://jsfiddle.net/n3gmsgto/

HTML：

<div id="headbar">
   <div id="logo">Logo</div>
   <div id="A">A</div>
   <div id="B">B</div> 
</div>

CSS：

#headbar{
   background-color:#0099ff; 
   height:100px;   
   width:100%
}

#logo{
   position:relative;
    float:left;
    width:70%;
    //or maybe min-width:x%;
  }

#A{
   position:relative;
    float:left;
     width:15%;
  }

#B{
   position:relative;
    float:left;
     width:15%;
  }

也可以用不同的方式排列它们以获得类似的结果。