如何调整dz论坛帖子左侧头像信息栏宽度

Posted 2023-05-16

适用版本:Discuz! X3.0 Discuz! X2.5 类型: 打开template/default/common/module.css大概找到.pls width: 160px; background: 和 (IMGDIR/midavt_shadow.gif) 0 100% repeat-x; width:120px;

参考技术A 160是总的宽度 120是头像宽度，同等放大，刷新模版即可 查看原帖>>本回答被提问者采纳

如何防止滚动条推送元素？

【中文标题】如何防止滚动条推送元素？

【英文标题】：how to prevent scrollbar from pushing elements?

【发布时间】：2019-03-10 17:18:53

【问题描述】：

我使用materialize CSS框架，并且我有一个宽度为100vw的移动屏幕自定义搜索栏，如果没有滚动条，它可以很好地工作，当滚动条出现时，我的搜索栏被推到左侧，如下所示。

没有滚动条

带滚动条

宽度 100%

我的意思是如下图所示

***上的搜索栏可以调整屏幕宽度

导航栏

<nav>
  <div class="nav-wrapper">
    <a href="#" data-target="slide-out" class="sidenav-trigger show-on-small">
      <i class="material-icons">menu</i>
    </a>
    <a href="/" class="brand-logo center">
      <img src="images/personal-logo-full.png" >
    </a>
    <div class="searchbar right">
      <form action="#" method="POST" autocomplete="off" class="search-wrapper">
        <div class="search-field" :class=" active: searchIsActive ">
          <a class="search-icon" @click="openSearch"><i class="material-icons">search</i></a>
          <input type="text" id="search-input" placeholder="Search" class="browser-default search-input" v-model="searchText">
          <a class="close-icon" @click="closeSearch"><i class="material-icons">close</i></a>
        </div>
      </form>
    </div>
  </div>
</nav>

风格

// materialize default
nav .nav-wrapper 
  position: relative;
  height: 100%;


// custom
.searchbar 
  position: relative;
  height: 100%;
  background-color: #fff;
  z-index: 1;


.search-wrapper, .search-field 
  display: flex;
  align-items: center;
  justify-content: space-between;


.search-field 
  height: 34px;
  width: 40px;
  margin: 0 10px;
  padding: 0 8px;
  border-radius: 5rem;
  overflow: hidden;
  transition: all .2s ease-in-out;
  @media #$large-and-up 
    margin: 0;
  
  &.active 
    width: calc(100vw - 20px);
    background-color: #F5F6F7;
    @media #$large-and-up 
      width: 300px;
      margin: 0 15px;
    
  
  .search-input 
    width: inherit;
    background-color: transparent;
    margin: 0 8px;
  
  a 
    color: #333;
    cursor: pointer;
    transition: color .2s;
  

【问题讨论】：

没有看到您的代码，我们只能猜测：您是否尝试将宽度设置为 100% 而不是 100vw ？

@fcalderan 是的，但它不会使搜索栏全宽

这是浏览器的预期行为。为什么会出现这个问题？

@DanielWilliams 因为搜索栏被推到左边，看第二张图，没想到

请在工作示例中提供所有相关代码，以便人们更好地了解您正在尝试做什么。除此之外，@DanielWilliams 想说的是浏览器应该以这种方式运行，因为滚动条还会定位在哪里？这就是应该如何查看网站的方式。防止这种情况的唯一方法是让滚动条不可见，这远非理想。

【参考方案1】：

您有一个宽度为 100vw 的移动屏幕自定义搜索栏...

尝试使用width: 100%;

100vw 取视口宽度，包括滚动条

如果我没记错的话，你也可以使用width: calc(100vw - 13px)，在一般情况下，滚动条是 13px，但这是一种 hacky 方式。

编辑：

您知道移动设备实际上不会显示滚动条，对吧。

如果您只是在调整大小的浏览器上进行测试，而您并不关心这一点，因为没有多少人这样做，您可以忽略它。

如果您想查看真实的移动行为，请使用ngrok 在线访问本地网站。