Question

我想调整左侧导航菜单区域的大小，使其有点薄。我使用此代码示例作为示例：

＆＃13;

/* eslint-env node */

module.exports = {
  context: __dirname + '/xyz/static',
  entry: {
    reactComponents: './bundle/components.js',
    history: './js/history/index.js',
    slickgrid: './bundle/slickgrid.js',
  },
  output: {
    libraryTarget: 'amd',
    path: __dirname + '/xyz/static/js/generated',
    filename: '[name].js',
  },

  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: [/node_modules/, /vendor/],
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react'],
        },
      },
    }, {
      test: /\.css$/,
      use: ['style-loader', 'raw-loader'],
    }],
  },

  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

＆＃13;

div.container {
  width: 100%;
  border: 1px solid gray;
}

header,
footer {
  padding: 1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}

nav {
  float: left;
  max-width: 160px;
  margin: 0;
  padding: 1em;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul a {
  text-decoration: none;
}

article {
  margin-left: 170px;
  border-left: 1px solid gray;
  padding: 1em;
  overflow: hidden;
}

＆＃13;

参考：https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float

我如何获得这种视觉效果：

Answer 1

你所要做的就是减少＆＃34;文章＆＃34; ＆＃34; nav＆＃34;

的宽度

＆＃13;

div.container {
  width: 100%;
  border: 1px solid gray;
}

header,
footer {
  padding: 1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}

nav {
  float: left;
  //CHANGE THIS FROM max-width: 160px to the following
  max-width: 60px;
  margin: 0;
  padding: 1em;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul a {
  text-decoration: none;
}

article {
  //CHANGE THIS FROM margin-left: 170px to the following
  margin-left: 100px;
  
  border-left: 1px solid gray;
  padding: 1em;
  overflow: hidden;
}

＆＃13;

<div class="container">

  <header>
    <h1>City Gallery</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>

  <article>
    <h1>London</h1>
    <p>Lo.........m.</p>
  </article>

  <footer>Copyri....com</footer>

</div>

＆＃13;

Answer 2

将Margin-left设置为您想要的任何值，如下所示：我将170 px更改为17 px，例如

article {
    margin-left: 17px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

Answer 3

您可以将nav填充更改为像padding: 5px;一样小，最后减少导航元素的font-size，以便让它更薄

＆＃13;

div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 50px;
    margin: 0;
    padding: 5px;
    font-size:10px;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 50px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <div class="container">
      <header>
        <h1>City Gallery</h1>
      </header>
      
      <nav>
        <ul>
          <li><a href="#">London</a></li>
          <li><a href="#">Paris</a></li>
          <li><a href="#">Tokyo</a></li>
        </ul>
      </nav>

      <article>
        <h1>London</h1>
        <p>Lo.........m.</p>
      </article>
      
      <footer>Copyri....com</footer>
    </div>
  </body>
</html>

＆＃13;

调整导航菜单区域的大小

3 个答案: