css - 如何删除屏幕右侧的空白区域

Question

这个wordpress网站http://www.sulu13.net/14有一个响应式 Logo 和菜单，我希望将其居中，以便与帖子下面内容的边缘对齐。所以我补充道:

.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

宽度:100%(默认宽度)+ 380px(左值)= 100% + 380px

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

但是，我建议不要使用绝对位置来提高响应速度，并且不需要对值进行操作。

• 删除left:380px

• 应用此:

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

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