第二栏中的中心按钮宽度灵活吗？

Question

如何在#top-menu中将红色和黄色蓝色按钮居中？

http://jsfiddle.net/qhoc/qKXD2/

我的问题是我希望#top-menu停留在右侧，而不要覆盖整个屏幕宽度。 现在， #top-menu都位于屏幕本身的中心。

谢谢。

Answer 1

像这样更改＃top-menu .center和#logo样式，我认为这是您想要的

#logo {
  background-color: yellow;
  display: block;
  float: left;
  width: 180px;
  height: 45px;
  position:absolute;
 }


#top-menu .center {
  width: 235px;
  margin auto;
}

演示

Answer 2

从按钮样式中删除float:left并添加display:inline-block. 将overflow:auto添加到#top-menu .center

说明

Float:left ：使您的div与父div完全左对齐。

disply:block:使div占据整个水平空间。

Overflow:auto ：根据ot内的内容使父div扩展。

由于您需要将两个div彼此相邻放置，所以请使用inline-block 。 inline-block使div根据div内部的内容进行扩展。

现场演示

Answer 3

这是解决方案。 删除徽标中剩余的浮点并将margin：0自动设置为； 见下面的链接

http://jsfiddle.net/qKXD2/6/

非常感谢

Answer 4

检查演示中的中心徽标和标题顶部的菜单。