个人中心
gpt4 book ai didi

html - 非常奇怪的 CSS 格式与 React 应用程序，主要重叠。我该如何解决？

转载 作者：行者123 更新时间：2023-11-28 00:08:54 26 4
gpt4 key购买 nike

我什至不确定如何链接以显示问题，因为 webpack 和 React 将所有 CSS 组合成一个东西。

这是网站显示内容的代码笔:https://codepen.io/livebacteria/pen/bJpRxq

代码:

    <html lang="en"><head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json">
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  <style type="text/css">body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
</style><style type="text/css">.App {
  text-align: center;
}

.roomContent {
  width: 85%;
}

.roomId {
  width: 85%;
  background-color: darkgray;
  top: 0;
  float: top;
  text-align: center;
  overflow: hidden;
}

.messageList {
  margin-left: 15%;
}

#sign-in-button {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 2%;
  width: 5%;
  background-color: red;
  overflow-x: hidden;
}</style><style type="text/css">#room-list {
    left: 0;
    height: 100%;
    width: 15%;
    background-color: #797979;
    overflow-x: hidden;
}

#rooms {
    background-color: darkgray;
    margin: .2em;
    border: .2em solid black;
    border-radius: .5em;
}

.active {
    transition: background-color 0.2s ease-in-out;
    background-color: white;
    color: black;
}</style><style type="text/css">.message {
    background-color: lightgrey;
}

.alter {
    background-color: teal;
    color: white;
}

ul {
    list-style: none;
}

.username {
    left: 0;
    font-weight: bold
}

.msgContent {
    text-align: justify;
}

.timestamp {
    right: 100%;
}

li {
    display: -webkit-flex;
    display: flex;
}</style><script charset="utf-8" src="/main.301d260d2d5d7cc6e354.hot-update.js"></script><script charset="utf-8" src="/main.1b967c31a26f143b4c18.hot-update.js"></script><script charset="utf-8" src="/main.71fa75690276c3793425.hot-update.js"></script><script charset="utf-8" src="/main.bd4f9c2dd0d0d73a5767.hot-update.js"></script><script charset="utf-8" src="/main.674bf126f112209cc501.hot-update.js"></script><script charset="utf-8" src="/main.d51f6dd5d844ba3b041f.hot-update.js"></script><script charset="utf-8" src="/main.3b7da7fe7854caba082b.hot-update.js"></script><script charset="utf-8" src="/main.83cd193b84cfa377dad0.hot-update.js"></script><script charset="utf-8" src="/main.2a3407b574c86757e486.hot-update.js"></script><script charset="utf-8" src="/main.593394f8893e7c304918.hot-update.js"></script><script charset="utf-8" src="/main.ca86c32b9f61b8f0bb0b.hot-update.js"></script><script charset="utf-8" src="/main.8bbf712997dd0b0cc98c.hot-update.js"></script><script charset="utf-8" src="/main.8dc8d68395e79c2c6dbd.hot-update.js"></script><script charset="utf-8" src="/main.8f1d3411148d4555e4db.hot-update.js"></script><script charset="utf-8" src="/main.03f056389193af93776c.hot-update.js"></script><script charset="utf-8" src="/main.9cac50b16b883a71fef4.hot-update.js"></script></head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"><div class="App"><div class="roomListInfo"><div id="room-list"><section id="informationalHeader"><div><h1>Bloc Chat</h1></div></section><section id="rooms"><div><div class="active">room_1</div><div class="">room_2</div><div class="">room_3</div><div class="">Additional Information</div><div class=""></div><div class="">Mentor chat</div><div class="">retest</div><div class=""></div></div></section><section id="createRooms"><div><form><input type="text" id="nameEntry" value=""><input type="submit" disabled="" value="Create Room"></form></div></section></div></div><div class="roomContent"><h1 class="roomId">room_1</h1><div class="messageList"><div><div><ul><li class="username">LiveBactera</li><li class="msgContent">Testing</li><li class="timestamp">No Data</li></ul></div></div></div></div><div class="userInfo"><div><div><button>Sign Out</button><p>Tyler Poore</p></div></div></div></div></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script><script src="/main.937734484660ad27272f.hot-update.js"></script>

</body></html>

但是，我的问题是我正在尝试构建一个您知道的聊天应用程序/网站，看起来像一个。也许最喜欢 Slack。我有不同组件的主要重叠问题。我希望顶部标题栏固定在顶部，左侧的导航栏也固定在顶部，最后，内容应该是可滚动的。

我什至不知道从哪里开始学习 CSS。我已经完成了大量教程，但没有任何意义。感觉 CSS 比 JS 多。唯一可以实现我想要的侧边栏外观的代码是 position: fixed 样式在 CSS 中。我读到这可能会导致其他/fixed/元素出现重大问题，而且确实如此。

我越弄乱 CSS，它就变得越糟，我几乎不得不重新启动整个元素，因为它变得太糟糕了。

最佳答案

我猜你想要左边的 roomListInfo，右边的 roomContent？

一些快速修复:

您需要将它们并排放置，而不是堆叠在一起。你可以通过让它们都 display: inline-block 并让 roomListInfo 有 width: 15% 来匹配 width : 85% 在 roomContent 上。您似乎尝试将其添加到 room-list 中，因此您应该撤消它。

接下来，让 roomContent 紧贴在“线”的顶部(因为现在两者都在一条线上，就像一行文本)，这两个元素现在都存在于其上，而不是坐在上面在它的底部，添加 vertical-align: top 到它。

关于html - 非常奇怪的 CSS 格式与 React 应用程序，主要重叠。我该如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55525357/

26 4 0
文章推荐： css - 在伪元素上进行转换时过渡会导致元素在Safari中抖动
文章推荐： javascript - 激活服务器时间上的单选按钮
文章推荐： javascript - GetSubRaster 并在另一个 Canvas 中显示 PaperJS
文章推荐： javascript - pageMod 多次附加 worker
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com