如何自定义div的宽度，内部面板，全宽答案

【问题标题】：how to customize width of a div, inside panel, full width如何自定义div的宽度，内部面板，全宽
【发布时间】：2018-04-04 19:31:34
【问题描述】：

如何在侧面板中制作 div (jquery Mobile), div 应该是面板的宽度。

我试过了，但还是这样：

这是我的代码：

#profile {
  background-color: green;
  border-bottom: 1px solid #242A37;
  overflow: hidden;
  height: 100px;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

.profile_info {
  position: relative;
  left: 68px;
  top: -49px;
  font-size: 14px;
  color: #C4CCDA;
  text-shadow: 0 0px 0 black;
}

<div data-role="panel" data-display="overlay" id="sidebar" style="background:white;">
  <div id="profile">
    <img src="img/profile.png">
    <div class="profile_info"><strong>User</strong><br><small>email@gmail.com</small></div>
  </div>
  <h3>MENU</h3>
</div>

【问题讨论】：

这是一个外部面板还是在页面内？
页面内的@deblocker

标签： jquery css jquery-mobile

【解决方案1】：

要将面板的内容设置为“全宽”需要覆盖JQM类.ui-panel-inner：

#profile {
  background-color: green;
  border-bottom: 1px solid #242A37;
  overflow: hidden;
  height: 100px;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

.profile_info {
  position: relative;
  left: 68px;
  font-size: 14px;
  color: #C4CCDA;
  text-shadow: 0 0px 0 black;
}

#sidebar .ui-panel-inner {
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div id="page-1" data-role="page">
    <div data-role="header">
      <a href="#sidebar" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bars">Panel</a>
      <span class="ui-title"></span>
    </div>
    <div role="main" class="ui-content">
    </div>
    <div data-role="panel" data-display="overlay" id="sidebar">
      <div id="profile">
        <img src="img/profile.png">
        <div class="profile_info"><strong>User</strong>
          <br><small>email@gmail.com</small></div>
      </div>
      <h3>MENU</h3>
    </div>
  </div>
</body>

</html>

【讨论】：