Question

如何在侧面板中创建div（jquery Mobile）， div应该满足于面板的宽度。

我试过了，但仍然喜欢这样：

这是我的代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

将面板内容设置为＆＃34;全宽＆＃34;您需要覆盖JQM类.ui-panel-inner：

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

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

1 个答案: