如何从屏幕右侧删除空白区域

Question

此wordpress网站http://www.sulu13.net/14有一个响应式徽标和菜单，我想要居中，以便与帖子中下面内容的边缘对齐。所以我补充道：

.tc-header .brand a {   /* Logo */
position: relative;
left: 200px; }

.navbar .navbar-inner {  /* Navbar */
position: relative;
top: 130px;
left: 380px; }

添加此CSS后，屏幕将获得一个水平滚动条，并在屏幕右侧显示空白区域（等于left: 380px）。有些东西告诉我它与响应式菜单按钮共享相同的类.navbar .navbar-inner作为非响应式菜单。我会改变这一点，但我对PHP的了解有限，所以我不知道从哪里开始。

我已经尝试删除JQuery菜单本身，但这没有效果，（我的猜测是......），因为我实际上没有删除响应式菜单按钮/菜单。

这是主要的CSS文件 - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6

任何想法都会受到赞赏，提前感谢您的时间。

伊恩

Answer 1

width:100% (default width) + 380px (left value) = 100% + 380px

如果您希望它保持原样，您需要调整导航的大小以补偿移动，这意味着类似width:calc(100% - 380px);

但是，我建议不要使用绝对位置来提高响应速度，不要求操纵值。

• 删除left:380px

• 申请：

  #menu-my-menu {
      float:right;
  }
  

此方法还允许添加更多列表元素，并且它们将自动正确定位

Answer 2

使用此：

.navbar .navbar-inner {  /* Navbar */
position: relative;
top: 130px;
}

所以，删除left:380px。我不明白你的意思是将菜单居中并与下面的文字对齐，因为文本的容器比菜单和徽标的容器宽，如果你将菜单与下面的帖子对齐，它将不会居中了。但删除left属性应该可以为您提供所需的内容。

Answer 3

感谢帮帮！ 我回过头来仔细研究一下，结果发现我能用一个包装器和一些媒体查询来解决问题，以便进行宽度调整。