如何避免出现水平滚动条？

时间：2019-06-26 20:56:29

标签： css scrollbar

我已尝试修复所有问题，但仍向右稍微水平滚动。
我申请了box-sizing，所以我不知道问题是什么。
怎么了？

Chart.defaults.global.defaultFontColor = '#A8A8A8'
let line = document.getElementById('line-chart').getContext('2d');
let myLineChart = new Chart(line, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: ['', '16-22', '23-29', '30-5', '6-12', '13-19', '20-26', '27-3', '4-10', '11-17', '18-24', '25-31'],
    datasets: [{
      backgroundColor: 'rgb(226,227,247, 0.6)',
      borderColor: 'purple',
      pointRadius: [0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
      pointBackgroundColor: 'white',
      lineTension: 0,
      data: [0, 600, 700, 650, 800, 900, 950, 1000, 850, 900, 550, 1000, 2000]
    }]
  },

  // Configuration options go here
  options: {
    legend: false,
    scales: {
      yAxes: [{
        gridLines: {
          drawTicks: false
        },
        ticks: {
          suggestedMax: 2500,
          stepSize: 500,
          padding: 10,
          callback: function(value, index) {
            if (value !== 0) return value;
          }
        }
      }],
      xAxes: [{
        gridLines: {
          tickMarkLength: 8,
          drawTicks: false
        },
        ticks: {
          padding: 10
        }
      }]
    }
  }
});

let bar = document.getElementById('bar-chart').getContext('2d');
let myBarChart = new Chart(bar, {
  // The type of chart we want to create
  type: 'bar',

  // The data for our dataset
  data: {
    labels: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    datasets: [{
      backgroundColor: '#7377BF',
      data: [50, 75, 100, 60, 150, 220, 230, 110, 65, 250, 130, 120]
    }]
  },

  // Configuration options go here
  options: {
    legend: false,
    scales: {
      yAxes: [{
        gridLines: {
          drawTicks: false
        },
        ticks: {
          max: 250,
          min: 0,
          stepSize: 50,
          padding: 10,
          callback: function(value, index) {
            if (value !== 0) return value;
          }
        }
      }],
      xAxes: [{
        gridLines: {
          tickMarkLength: 8,
          drawTicks: false
        },
        ticks: {
          padding: 10
        }
      }]
    }
  }
});

let doughnut = document.getElementById('doughnut-chart').getContext('2d');
let myDoughnutChart = new Chart(doughnut, {
  // The type of chart we want to create
  type: 'doughnut',

  // The data for our dataset
  data: {
    labels: ['Phones', 'Tablet', 'Desktop'],
    datasets: [{
      data: [40, 40, 120],
      backgroundColor: ['#7377BF', '#6FACB0', '#8BBD90', ]
    }]
  },

  options: {
    legend: {
      position: 'right',
      labels: {
        boxWidth: 15
      }
    }
  }
});
* {
  box-sizing: border-box;
}


/* GRID AREA */

.header {
  grid-area: header;
}

.side-navigation {
  grid-area: side-navigation;
}

.traffic {
  grid-area: traffic;
}

.daily-traffic {
  grid-area: daily-traffic;
}

.mobile-users {
  grid-area: mobile-users;
}

.social-stats {
  grid-area: social-stats;
}

.new-members {
  grid-area: new-members;
}

.recent-activity {
  grid-area: recent-activity;
}

.message-users {
  grid-area: message-users;
}

.settings {
  grid-area: settings;
}


/* HEADER */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-bell-div {
  width: 40px;
  height: 40px;
}


/* SIDE NAVIGATION */

.side-navigation {
  display: flex;
  justify-content: center;
}

.side-navigation>* {
  width: 56px;
  height: 56px;
  margin-right: 10px;
}


/* TRAFFIC INFORMATION */

.traffic {
  flex-direction: column;
}

.search-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-top input {
  padding: 5px 5px;
  flex-basis: 25%;
  margin-right: 10px;
}

.traffic-titles {
  display: flex;
  align-items: center;
}

.traffic-titles p {
  margin-right: auto;
}


/* SOCIAL STATS */

.social-stats {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.social-stats-boxes {
  /* Inside is various boxes */
  display: flex;
  border: 5px green solid;
  justify-content: space-between;
}

.twitter-box,
.facebook-box,
.google-box {
  flex-basis: 25%;
  display: flex;
}

.twitter-svg-div,
.facebook-svg-div,
.google-svg-div {
  background-color: #7377BF;
  padding: 20px;
  display: inline-block;
  margin-right: 20px;
}

.twitter-svg,
.facebook-svg,
.google-svg {
  height: 56px;
  width: 56px;
  text-align: center;
}

.twitter-path,
.facebook-path,
.google-path {
  fill: white;
}


/* IMAGES */

img {
  border-radius: 50%;
}


/* NEW MEMBERS */

.new-members {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.member-new {
  display: flex;
}

.date {
  margin-left: auto;
}


/* RECENT ACTIVITY */

.recent-activity {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.member-recent {
  display: flex;
}

.arrow {
  margin-left: auto;
  transform: rotate(-23deg);
}

i {
  border: solid black;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 3px;
}


/* MESSAGE USER */

.message-users {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 10px;
}

.message-users input,
.message-users textarea {
  margin: 10px 0;
  padding: 10px 0;
}


/* SETTINGS */

.settings {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

select[name='timezone'] {
  padding: 5px 0;
}

.switch-light {
  display: flex !important;
  justify-content: start !important;
}

.switch-light>* {
  margin-bottom: 20px;
}

.switch-light>span {
  width: 100px !important;
}

.switch-light>strong {
  width: 250px !important;
}

.buttons {
  display: flex;
}

.buttons>* {
  flex: 1;
  padding: 10px 0;
}

button:nth-child(1) {
  margin-right: 30px;
}

.main-container {
  display: grid;
  grid-template-rows: repeat(auto-fit, 1fr);
  grid-template-areas: "header" "side-navigation" "traffic" "daily-traffic" "mobile-users" "social-stats" "new-members" "recent-activity" "message-users" "settings"
}


/* @media (min-width: 768px) {
	.main-container {
		grid-template-rows: 50px repeat(auto-fit, 1fr);
		grid-template-columns: 50px 1fr 1fr;
		grid-template-areas: 
		"header header header"
		"side-navigation traffic traffic"
		"side-navigation daily-traffic mobile-users"
		"side-navigation social-stats social-stats"
		"side-navigation new-members recent-activity"
		"side-navigation message-users settings" 
	}
} */
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>

<div class="main-container">
  <div class="header">
    <h1>YourApp</h1>
    <div class="icon-bell-div">
      <svg class="icon-bell-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:#FFFFFF;}
        </style>
        <g id="_x36__6_">
          <g>
            <path class="st0" d="M24,18v-8c0-5.5-4.5-10-10-10S4,4.5,4,10v8l-4,8h9.1c0.5,2.3,2.5,4,4.9,4s4.4-1.7,4.9-4H28L24,18z M14,28
              c-1.3,0-2.4-0.8-2.8-2h5.6C16.4,27.2,15.3,28,14,28z M3,24l3-6v-8c0-4.4,3.6-8,8-8s8,3.6,8,8v8l3,6H3z"/>
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div class="side-navigation">
    <div class="dashboard">
      <svg class="dashboard-svg" version="1.1" id="Line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:black;}
        </style>
        <g id="_x31_0_20_">
          <g>
            <path class="st0" d="M25,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C22,16.7,23.3,18,25,18z M24,14h2v2h-2V14z M25,26
              c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C22,24.7,23.3,26,25,26z M24,22h2v2h-2V22z M17,26c1.7,0,3-1.3,3-3
              c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C14,24.7,15.3,26,17,26z M16,22h2v2h-2V22z M28,0H6C3.8,0,2,1.8,2,4v24c0,2.2,1.8,4,4,4h22
              c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0z M30,28c0,1.1-0.9,2-2,2H6c-1.1,0-2-0.9-2-2V8h26V28z M30,6H4V4c0-1.1,0.9-2,2-2h22
              c1.1,0,2,0.9,2,2V6z M17,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C14,16.7,15.3,18,17,18z M16,14h2v2h-2V14z M9,26
              c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C6,24.7,7.3,26,9,26z M8,22h2v2H8V22z M9,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3
              c-1.7,0-3,1.3-3,3C6,16.7,7.3,18,9,18z M8,14h2v2H8V14z"/>
          </g>
        </g>
      </svg>
    </div>
    <div class="members">
      <svg class="members-svg" version="1.1" id="Line_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:black;}
        </style>
        <g id="_x37__17_">
          <g>
            <path class="st0" d="M18,16.4c1.3-1.7,2-3.9,2-6.4c0-5.5-4-10-9-10C6,0,2,4.5,2,10c0,2.4,0.8,4.6,2,6.4c-2.3,0.8-4,3-4,5.6v4
              c0,3.3,2.7,6,6,6h10c3.3,0,6-2.7,6-6v-4C22,19.4,20.3,17.2,18,16.4z M4,10c0-4.4,3.1-8,7-8c3.9,0,7,3.6,7,8s-3.1,8-7,8
              C7.1,18,4,14.4,4,10z M20,25.5c0,2.5-2.2,4.5-4.9,4.5H6.9C4.2,30,2,28,2,25.5v-3c0-2.1,1.6-3.9,3.8-4.4C7.2,19.3,9,20,11,20
              c2,0,3.8-0.7,5.2-1.9c2.2,0.5,3.8,2.2,3.8,4.4V25.5z M23,8h8c0.6,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-8c-0.6,0-1,0.4-1,1
              C22,7.6,22.4,8,23,8z M31,24h-6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C32,24.4,31.6,24,31,24z M31,12h-8
              c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C32,12.4,31.6,12,31,12z M31,18h-6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h6
              c0.6,0,1-0.4,1-1C32,18.4,31.6,18,31,18z"/>
          </g>
        </g>
      </svg>
    </div>
    <div class="social-visits">
      <svg class="social-visits-svg" version="1.1" id="Line_12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:black;}
        </style>
        <g id="_x35__10_">
          <g>
            <path class="st0" d="M14,0h-2c-1.1,0-2,0.9-2,2v28c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V2C16,0.9,15.1,0,14,0z M14,29
              c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z M4,9H2c-1.1,0-2,0.9-2,2v19c0,1.1,0.9,2,2,2h2
              c1.1,0,2-0.9,2-2V11C6,9.9,5.1,9,4,9z M4,29c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V12c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z M24,16h-2
              c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V18C26,16.9,25.1,16,24,16z M24,29c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V19
              c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z"/>
          </g>
        </g>
      </svg>
    </div>
    <div class="settings-side">
      <svg class="settings-svg" version="1.1" id="Line_6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:black;}
        </style>
        <g id="_x32__16_">
          <g>
            <path class="st0" d="M26,24H14.9c-0.4-1.7-2-3-3.9-3c-1.9,0-3.4,1.3-3.9,3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.1
              c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26c0.6,0,1-0.4,1-1C27,24.4,26.6,24,26,24z M11,27.4c-1.3,0-2.4-1.1-2.4-2.4
              c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4C13.4,26.3,12.3,27.4,11,27.4z M26,8H14.9c-0.4-1.7-2-3-3.9-3C9.1,5,7.6,6.3,7.1,8H6
              C5.4,8,5,8.4,5,9c0,0.6,0.4,1,1,1h1.1c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26c0.6,0,1-0.4,1-1C27,8.4,26.6,8,26,8z M11,11.4
              c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4C13.4,10.3,12.3,11.4,11,11.4z M26,16h-2.1
              c-0.4-1.7-2-3-3.9-3c-1.9,0-3.4,1.3-3.9,3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h10.1c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26
              c0.6,0,1-0.4,1-1C27,16.4,26.6,16,26,16z M20,19.4c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
              C22.4,18.3,21.3,19.4,20,19.4z M28,0H4C1.8,0,0,1.8,0,4v24c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0z M30,28
              c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2h24c1.1,0,2,0.9,2,2V28z"/>
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div class="traffic">
    <div class="search-top">
      <h1>Dashboard</h1>
      <input type="search" placeholder="Search">
    </div>
    <div class=alert>
      <p>Alert! This is a test.</p>
    </div>
    <div class="traffic-titles">
      <p>Traffic</p>
      <button>Hourly</button>
      <button>Daily</button>
      <button>Weekly</button>
      <button>Monthly</button>
    </div>
    <canvas id="line-chart"></canvas>
  </div>
  <div class="daily-traffic">
    <p>Daily Traffic</p>
    <canvas id="bar-chart"></canvas>
  </div>
  <div class="mobile-users">
    <p>Mobile Users</p>
    <canvas id="doughnut-chart"></canvas>
  </div>
  <div class="social-stats">
    <p>Social Stats</p>
    <div class="social-stats-boxes">
      <div class="twitter-box">
        <div class="twitter-svg-div">
          <svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
            <path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
              c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
              c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
              c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
              c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
          </svg>
        </div>
        <div class="twitter-info">
          <p>Twitter</p>
          <p>10,345</p>
        </div>
      </div>
      <div class="facebook-box">
        <div class="facebook-svg-div">
          <svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029  c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77  L40.43,21.739z"/>
          </svg>
        </div>
        <div class="facebook-info">
          <p>Facebook</p>
          <p>8,038</p>
        </div>
      </div>
      <div class="google-box">
        <div class="google-svg-div">
          <svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
            <path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
              c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
              c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
              c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
              c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
              c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
              c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
              c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
              c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
              c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
              c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
              c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
              c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
              c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
              c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
              h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
          </svg>
        </div>
        <div class="google-info">
          <p>Google</p>
          <p>9000</p>
        </div>
      </div>
    </div>
  </div>
  <div class="new-members">
    <p>New Members</p>
    <div class="member-new">
      <img src="images/member-1.jpg">
      <div class="email-info">
        <p>Victoria Chambers</p>
        <p><a href="mailto:victoria.chambers80@example.com">victoria.chambers80@example.com</a></p>
      </div>
      <p class="date">10/15/15</p>
    </div>
    <div class="member-new">
      <img src="images/member-2.jpg">
      <div class="email-info">
        <p>Dale Byrd</p>
        <p><a href="mailto:dale.byrd52@example.com">dale.byrd52@example.com</a></p>
      </div>
      <p class="date">10/15/15</p>
    </div>
    <div class="member-new">
      <img src="images/member-3.jpg">
      <div class="email-info">
        <p>Dawn Wood</p>
        <p><a href="mailto:dawn.wood16@example.com">dawn.wood16@example.com</a></p>
      </div>
      <p class="date">10/15/15</p>
    </div>
    <div class="member-new">
      <img src="images/member-4.jpg">
      <div class="email-info">
        <p>Dan Oliver</p>
        <p><a href="mailto:dan.oliver82@example.com">dan.oliver82@example.com</a></p>
      </div>
      <p class="date">10/15/15</p>
    </div>
  </div>
  <div class="recent-activity">
    <p>Recent Activity</p>
    <div class="member-recent">
      <img src="images/member-1.jpg">
      <div class="member-recent-activity">
        <p>Victoria Chambers commented on YourApp's SEO tips</p>
        <p>4 hours ago</p>
      </div>
      <p class="arrow"><i class="arrow right"></i></p>
    </div>
    <div class="member-recent">
      <img src="images/member-2.jpg">
      <div class="member-recent-activity">
        <p>Victoria Chambers commented on YourApp's SEO tips</p>
        <p>4 hours ago</p>
      </div>
      <p class="arrow"><i class="arrow right"></i></p>
    </div>
    <div class="member-recent">
      <img src="images/member-3.jpg">
      <div class="member-recent-activity">
        <p>Victoria Chambers commented on YourApp's SEO tips</p>
        <p>4 hours ago</p>
      </div>
      <p class="arrow"><i class="arrow right"></i></p>
    </div>
    <div class="member-recent">
      <img src="images/member-4.jpg">
      <div class="member-recent-activity">
        <p>Victoria Chambers commented on YourApp's SEO tips</p>
        <p>4 hours ago</p>
      </div>
      <p class="arrow"><i class="arrow right"></i></p>
    </div>
  </div>
  <div class="message-users">
    <p>Message Users</p>
    <input type="search" id="site-search" placeholder="Search for User">
    <textarea rows="10" cols="50" placeholder="Message for User"></textarea>
    <input type="submit" id="site-search" value="Send">
  </div>
  <div class="settings">
    <p>Settings</p>
    <label class="switch-light switch-ios" onclick="">
    <input type="checkbox">
    <strong class="switch-light-text">
    Send Email Notifications
    </strong>
    <span class="switch-light-span">
    <span>Off</span>
    <span>On</span>
    <a></a>
    </span>
    </label>
    <label class="switch-light switch-ios" onclick="">
    <input type="checkbox">
    <strong class="switch-light-text">
    Set Profile to Public
    </strong>
    <span class="switch-light-span">
    <span>Off</span>
    <span>On</span>
    <a></a>
    </span>
    </label>
    <select name="timezone">
      <option value="volvo" selected>Select a Timezone</option>
      <option value="volvo">Volvo</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <div class="buttons">
      <button>Save</button>
      <button>Cancel</button>
    </div>
  </div>
</div>

View on CodePen

2 个答案:

答案 0 :(得分：0)

我相信水平滚动是由于p.arrow元素内旋转的.member-recent元素引起的：

enter image description here

防止.member-recent元素溢出似乎很有帮助。

.member-recent {
  ...
  overflow: hidden;
}

这是一个示范：

Chart.defaults.global.defaultFontColor = '#A8A8A8'
let line = document.getElementById('line-chart').getContext('2d');
let myLineChart = new Chart(line, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: ['', '16-22', '23-29', '30-5', '6-12', '13-19', '20-26', '27-3', '4-10', '11-17', '18-24', '25-31'],
    datasets: [{
      backgroundColor: 'rgb(226,227,247, 0.6)',
      borderColor: 'purple',
      pointRadius: [0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
      pointBackgroundColor: 'white',
      lineTension: 0,
      data: [0, 600, 700, 650, 800, 900, 950, 1000, 850, 900, 550, 1000, 2000]
    }]
  },

  // Configuration options go here
  options: {
    legend: false,
    scales: {
      yAxes: [{
        gridLines: {
          drawTicks: false
        },
        ticks: {
          suggestedMax: 2500,
          stepSize: 500,
          padding: 10,
          callback: function(value, index) {
            if (value !== 0) return value;
          }
        }
      }],
      xAxes: [{
        gridLines: {
          tickMarkLength: 8,
          drawTicks: false
        },
        ticks: {
          padding: 10
        }
      }]
    }
  }
});

let bar = document.getElementById('bar-chart').getContext('2d');
let myBarChart = new Chart(bar, {
  // The type of chart we want to create
  type: 'bar',

  // The data for our dataset
  data: {
    labels: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    datasets: [{
      backgroundColor: '#7377BF',
      data: [50, 75, 100, 60, 150, 220, 230, 110, 65, 250, 130, 120]
    }]
  },

  // Configuration options go here
  options: {
    legend: false,
    scales: {
      yAxes: [{
        gridLines: {
          drawTicks: false
        },
        ticks: {
          max: 250,
          min: 0,
          stepSize: 50,
          padding: 10,
          callback: function(value, index) {
            if (value !== 0) return value;
          }
        }
      }],
      xAxes: [{
        gridLines: {
          tickMarkLength: 8,
          drawTicks: false
        },
        ticks: {
          padding: 10
        }
      }]
    }
  }
});

let doughnut = document.getElementById('doughnut-chart').getContext('2d');
let myDoughnutChart = new Chart(doughnut, {
  // The type of chart we want to create
  type: 'doughnut',

  // The data for our dataset
  data: {
    labels: ['Phones', 'Tablet', 'Desktop'],
    datasets: [{
      data: [40, 40, 120],
      backgroundColor: ['#7377BF', '#6FACB0', '#8BBD90', ]
    }]
  },

  options: {
    legend: {
      position: 'right',
      labels: {
        boxWidth: 15
      }
    }
  }
});
* {
  box-sizing: border-box;
}


/* GRID AREA */

.header {
  grid-area: header;
}

.side-navigation {
  grid-area: side-navigation;
}

.traffic {
  grid-area: traffic;
}

.daily-traffic {
  grid-area: daily-traffic;
}

.mobile-users {
  grid-area: mobile-users;
}

.social-stats {
  grid-area: social-stats;
}

.new-members {
  grid-area: new-members;
}

.recent-activity {
  grid-area: recent-activity;
}

.message-users {
  grid-area: message-users;
}

.settings {
  grid-area: settings;
}


/* HEADER */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-bell-div {
  width: 40px;
  height: 40px;
}


/* SIDE NAVIGATION */

.side-navigation {
  display: flex;
  justify-content: center;
}

.side-navigation>* {
  width: 56px;
  height: 56px;
  margin-right: 10px;
}


/* TRAFFIC INFORMATION */

.traffic {
  flex-direction: column;
}

.search-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-top input {
  padding: 5px 5px;
  flex-basis: 25%;
  margin-right: 10px;
}

.traffic-titles {
  display: flex;
  align-items: center;
}

.traffic-titles p {
  margin-right: auto;
}


/* SOCIAL STATS */

.social-stats {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.social-stats-boxes {
  /* Inside is various boxes */
  display: flex;
  border: 5px green solid;
  justify-content: space-between;
}

.twitter-box,
.facebook-box,
.google-box {
  flex-basis: 25%;
  display: flex;
}

.twitter-svg-div,
.facebook-svg-div,
.google-svg-div {
  background-color: #7377BF;
  padding: 20px;
  display: inline-block;
  margin-right: 20px;
}

.twitter-svg,
.facebook-svg,
.google-svg {
  height: 56px;
  width: 56px;
  text-align: center;
}

.twitter-path,
.facebook-path,
.google-path {
  fill: white;
}


/* IMAGES */

img {
  border-radius: 50%;
}


/* NEW MEMBERS */

.new-members {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.member-new {
  display: flex;
}

.date {
  margin-left: auto;
}


/* RECENT ACTIVITY */

.recent-activity {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.member-recent {
  display: flex;
  overflow: hidden;
}

.arrow {
  margin-left: auto;
  transform: rotate(-23deg);
}

i {
  border: solid black;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 3px;
}


/* MESSAGE USER */

.message-users {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 10px;
}

.message-users input,
.message-users textarea {
  margin: 10px 0;
  padding: 10px 0;
}


/* SETTINGS */

.settings {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

select[name='timezone'] {
  padding: 5px 0;
}

.switch-light {
  display: flex !important;
  justify-content: start !important;
}

.switch-light>* {
  margin-bottom: 20px;
}

.switch-light>span {
  width: 100px !important;
}

.switch-light>strong {
  width: 250px !important;
}

.buttons {
  display: flex;
}

.buttons>* {
  flex: 1;
  padding: 10px 0;
}

button:nth-child(1) {
  margin-right: 30px;
}

.main-container {
  display: grid;
  grid-template-rows: repeat(auto-fit, 1fr);
  grid-template-areas: "header" "side-navigation" "traffic" "daily-traffic" "mobile-users" "social-stats" "new-members" "recent-activity" "message-users" "settings"
}


/* @media (min-width: 768px) {
	.main-container {
		grid-template-rows: 50px repeat(auto-fit, 1fr);
		grid-template-columns: 50px 1fr 1fr;
		grid-template-areas: 
		"header header header"
		"side-navigation traffic traffic"
		"side-navigation daily-traffic mobile-users"
		"side-navigation social-stats social-stats"
		"side-navigation new-members recent-activity"
		"side-navigation message-users settings" 
	}
} */
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>

<div class="main-container">
  <div class="header">
    <h1>YourApp</h1>
    <div class="icon-bell-div">
      <svg class="icon-bell-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:#FFFFFF;}
        </style>
        <g id="_x36__6_">
          <g>
            <path class="st0" d="M24,18v-8c0-5.5-4.5-10-10-10S4,4.5,4,10v8l-4,8h9.1c0.5,2.3,2.5,4,4.9,4s4.4-1.7,4.9-4H28L24,18z M14,28
              c-1.3,0-2.4-0.8-2.8-2h5.6C16.4,27.2,15.3,28,14,28z M3,24l3-6v-8c0-4.4,3.6-8,8-8s8,3.6,8,8v8l3,6H3z"/>
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div class="side-navigation">
    <div class="dashboard">
      <svg class="dashboard-svg" version="1.1" id="Line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:black;}
        </style>
        <g id="_x31_0_20_">
          <g>
            <path class="st0" d="M25,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C22,16.7,23.3,18,25,18z M24,14h2v2h-2V14z M25,26
              c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C22,24.7,23.3,26,25,26z M24,22h2v2h-2V22z M17,26c1.7,0,3-1.3,3-3
              c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C14,24.7,15.3,26,17,26z M16,22h2v2h-2V22z M28,0H6C3.8,0,2,1.8,2,4v24c0,2.2,1.8,4,4,4h22
              c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0z M30,28c0,1.1-0.9,2-2,2H6c-1.1,0-2-0.9-2-2V8h26V28z M30,6H4V4c0-1.1,0.9-2,2-2h22
              c1.1,0,2,0.9,2,2V6z M17,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C14,16.7,15.3,18,17,18z M16,14h2v2h-2V14z M9,26
              c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C6,24.7,7.3,26,9,26z M8,22h2v2H8V22z M9,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3
              c-1.7,0-3,1.3-3,3C6,16.7,7.3,18,9,18z M8,14h2v2H8V14z"/>
          </g>
        </g>
      </svg>
    </div>
    <div class="members">
      <svg class="members-svg" version="1.1" id="Line_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:black;}
        </style>
        <g id="_x37__17_">
          <g>
            <path class="st0" d="M18,16.4c1.3-1.7,2-3.9,2-6.4c0-5.5-4-10-9-10C6,0,2,4.5,2,10c0,2.4,0.8,4.6,2,6.4c-2.3,0.8-4,3-4,5.6v4
              c0,3.3,2.7,6,6,6h10c3.3,0,6-2.7,6-6v-4C22,19.4,20.3,17.2,18,16.4z M4,10c0-4.4,3.1-8,7-8c3.9,0,7,3.6,7,8s-3.1,8-7,8
              C7.1,18,4,14.4,4,10z M20,25.5c0,2.5-2.2,4.5-4.9,4.5H6.9C4.2,30,2,28,2,25.5v-3c0-2.1,1.6-3.9,3.8-4.4C7.2,19.3,9,20,11,20
              c2,0,3.8-0.7,5.2-1.9c2.2,0.5,3.8,2.2,3.8,4.4V25.5z M23,8h8c0.6,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-8c-0.6,0-1,0.4-1,1
              C22,7.6,22.4,8,23,8z M31,24h-6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C32,24.4,31.6,24,31,24z M31,12h-8
              c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C32,12.4,31.6,12,31,12z M31,18h-6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h6
              c0.6,0,1-0.4,1-1C32,18.4,31.6,18,31,18z"/>
          </g>
        </g>
      </svg>
    </div>
    <div class="social-visits">
      <svg class="social-visits-svg" version="1.1" id="Line_12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:black;}
        </style>
        <g id="_x35__10_">
          <g>
            <path class="st0" d="M14,0h-2c-1.1,0-2,0.9-2,2v28c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V2C16,0.9,15.1,0,14,0z M14,29
              c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z M4,9H2c-1.1,0-2,0.9-2,2v19c0,1.1,0.9,2,2,2h2
              c1.1,0,2-0.9,2-2V11C6,9.9,5.1,9,4,9z M4,29c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V12c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z M24,16h-2
              c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V18C26,16.9,25.1,16,24,16z M24,29c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V19
              c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z"/>
          </g>
        </g>
      </svg>
    </div>
    <div class="settings-side">
      <svg class="settings-svg" version="1.1" id="Line_6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:black;}
        </style>
        <g id="_x32__16_">
          <g>
            <path class="st0" d="M26,24H14.9c-0.4-1.7-2-3-3.9-3c-1.9,0-3.4,1.3-3.9,3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.1
              c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26c0.6,0,1-0.4,1-1C27,24.4,26.6,24,26,24z M11,27.4c-1.3,0-2.4-1.1-2.4-2.4
              c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4C13.4,26.3,12.3,27.4,11,27.4z M26,8H14.9c-0.4-1.7-2-3-3.9-3C9.1,5,7.6,6.3,7.1,8H6
              C5.4,8,5,8.4,5,9c0,0.6,0.4,1,1,1h1.1c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26c0.6,0,1-0.4,1-1C27,8.4,26.6,8,26,8z M11,11.4
              c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4C13.4,10.3,12.3,11.4,11,11.4z M26,16h-2.1
              c-0.4-1.7-2-3-3.9-3c-1.9,0-3.4,1.3-3.9,3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h10.1c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26
              c0.6,0,1-0.4,1-1C27,16.4,26.6,16,26,16z M20,19.4c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
              C22.4,18.3,21.3,19.4,20,19.4z M28,0H4C1.8,0,0,1.8,0,4v24c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0z M30,28
              c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2h24c1.1,0,2,0.9,2,2V28z"/>
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div class="traffic">
    <div class="search-top">
      <h1>Dashboard</h1>
      <input type="search" placeholder="Search">
    </div>
    <div class=alert>
      <p>Alert! This is a test.</p>
    </div>
    <div class="traffic-titles">
      <p>Traffic</p>
      <button>Hourly</button>
      <button>Daily</button>
      <button>Weekly</button>
      <button>Monthly</button>
    </div>
    <canvas id="line-chart"></canvas>
  </div>
  <div class="daily-traffic">
    <p>Daily Traffic</p>
    <canvas id="bar-chart"></canvas>
  </div>
  <div class="mobile-users">
    <p>Mobile Users</p>
    <canvas id="doughnut-chart"></canvas>
  </div>
  <div class="social-stats">
    <p>Social Stats</p>
    <div class="social-stats-boxes">
      <div class="twitter-box">
        <div class="twitter-svg-div">
          <svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
            <path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
              c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
              c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
              c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
              c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
          </svg>
        </div>
        <div class="twitter-info">
          <p>Twitter</p>
          <p>10,345</p>
        </div>
      </div>
      <div class="facebook-box">
        <div class="facebook-svg-div">
          <svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029  c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77  L40.43,21.739z"/>
          </svg>
        </div>
        <div class="facebook-info">
          <p>Facebook</p>
          <p>8,038</p>
        </div>
      </div>
      <div class="google-box">
        <div class="google-svg-div">
          <svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
            <path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
              c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
              c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
              c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
              c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
              c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
              c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
              c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
              c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
              c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
              c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
              c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
              c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
              c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
              c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
              h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
          </svg>
        </div>
        <div class="google-info">
          <p>Google</p>
          <p>9000</p>
        </div>
      </div>
    </div>
  </div>
  <div class="new-members">
    <p>New Members</p>
    <div class="member-new">
      <img src="images/member-1.jpg">
      <div class="email-info">
        <p>Victoria Chambers</p>
        <p><a href="mailto:victoria.chambers80@example.com">victoria.chambers80@example.com</a></p>
      </div>
      <p class="date">10/15/15</p>
    </div>
    <div class="member-new">
      <img src="images/member-2.jpg">
      <div class="email-info">
        <p>Dale Byrd</p>
        <p><a href="mailto:dale.byrd52@example.com">dale.byrd52@example.com</a></p>
      </div>
      <p class="date">10/15/15</p>
    </div>
    <div class="member-new">
      <img src="images/member-3.jpg">
      <div class="email-info">
        <p>Dawn Wood</p>
        <p><a href="mailto:dawn.wood16@example.com">dawn.wood16@example.com</a></p>
      </div>
      <p class="date">10/15/15</p>
    </div>
    <div class="member-new">
      <img src="images/member-4.jpg">
      <div class="email-info">
        <p>Dan Oliver</p>
        <p><a href="mailto:dan.oliver82@example.com">dan.oliver82@example.com</a></p>
      </div>
      <p class="date">10/15/15</p>
    </div>
  </div>
  <div class="recent-activity">
    <p>Recent Activity</p>
    <div class="member-recent">
      <img src="images/member-1.jpg">
      <div class="member-recent-activity">
        <p>Victoria Chambers commented on YourApp's SEO tips</p>
        <p>4 hours ago</p>
      </div>
      <p class="arrow"><i class="arrow right"></i></p>
    </div>
    <div class="member-recent">
      <img src="images/member-2.jpg">
      <div class="member-recent-activity">
        <p>Victoria Chambers commented on YourApp's SEO tips</p>
        <p>4 hours ago</p>
      </div>
      <p class="arrow"><i class="arrow right"></i></p>
    </div>
    <div class="member-recent">
      <img src="images/member-3.jpg">
      <div class="member-recent-activity">
        <p>Victoria Chambers commented on YourApp's SEO tips</p>
        <p>4 hours ago</p>
      </div>
      <p class="arrow"><i class="arrow right"></i></p>
    </div>
    <div class="member-recent">
      <img src="images/member-4.jpg">
      <div class="member-recent-activity">
        <p>Victoria Chambers commented on YourApp's SEO tips</p>
        <p>4 hours ago</p>
      </div>
      <p class="arrow"><i class="arrow right"></i></p>
    </div>
  </div>
  <div class="message-users">
    <p>Message Users</p>
    <input type="search" id="site-search" placeholder="Search for User">
    <textarea rows="10" cols="50" placeholder="Message for User"></textarea>
    <input type="submit" id="site-search" value="Send">
  </div>
  <div class="settings">
    <p>Settings</p>
    <label class="switch-light switch-ios" onclick="">
    <input type="checkbox">
    <strong class="switch-light-text">
    Send Email Notifications
    </strong>
    <span class="switch-light-span">
    <span>Off</span>
    <span>On</span>
    <a></a>
    </span>
    </label>
    <label class="switch-light switch-ios" onclick="">
    <input type="checkbox">
    <strong class="switch-light-text">
    Set Profile to Public
    </strong>
    <span class="switch-light-span">
    <span>Off</span>
    <span>On</span>
    <a></a>
    </span>
    </label>
    <select name="timezone">
      <option value="volvo" selected>Select a Timezone</option>
      <option value="volvo">Volvo</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <div class="buttons">
      <button>Save</button>
      <button>Cancel</button>
    </div>
  </div>
</div>

答案 1 :(得分：0)

您可以通过将body上的溢出隐藏起来

将此添加到您的css 

body{
  overflow-x: hidden;
}
相关问题
最新问题