Question

＆＃13;

#msgbox,
#opt a:hover {
  background-color: #fff
}

#header,
#msgbox p,
#opt,
#whitpag,
body {
  margin: 0
}

#header {
  text-align: center;
  background: linear-gradient(to right, #0ff, purple);
  padding: 20px;
  border-bottom: 2px solid #d3d3d3
}

#header h1 {
  margin: 0;
  font-family: 'Great Vibes', cursive;
  color: #fff;
  font-size: 40px
}

#whitpag {
  padding: 10px
}

#dabba {
  border: 2px solid #000;
  border-radius: 5px;
  background-color: #d3d3d3;
  max-width: 700px;
  margin: 0 auto
}

#opt {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: 2px solid #000;
  background-color: #dc143c;
  color: #fff;
  padding: 0 4px
}

#opt a,
p {
  text-decoration: none;
  color: #fff;
  padding: 0
}

#opt a:hover {
  color: #dc143c
}

#msgbox {
  margin: 10px;
  border: 1px solid grey;
  border-radius: 5px;
  ;
  max-height: 300px;
  overflow: auto
}

#msgbox p {
  padding: 5px;
  color: #000;
  font-size: 16px
}

#inpt {
  margin: 0 10px 10px
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>The Joint.</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

<body>
  <div id="header">
    <h1>The Joint.</h1>
  </div>
  <div id="whitpag">
    <div id="dabba">
      <div id="opt">
        <p><strong><?php 
$lgq="SELECT message FROM message ORDER BY DATE_TIME DESC";
$log=$mysqli->query($lgq);
$rows=$log->num_rows;
$rem=100-$rows;
	echo "Auto Delete In ".$rem." Messages, Reload Not refresh to see New Texts"; ?></strong></p>
        <p><b><a href="https://www.google.com">
		    			Log Out
	</a></b></p>
      </div>
      <div id="act">
        <div id="msgbox">
          <p>
            <?php?>
          </p>

        </div>
        <div id="inpt">
          <form method="POST" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>">
            <input type="text" name="message">
            <input type="submit" name="send" value="send">
        </div>
        </form>
      </div>
    </div>
  </div>
  </div>

</body>

</html>

＆＃13;

我已经制作了一个基于网络的聊天应用程序，我显示div标签之间的所有文本消息，虽然我已经将div标签的样式设置为舍入，但是滚动出现的角落返回到边框半径为0px.But另外两个角保持在css文件中指定。我该如何解决这个问题？

Answer 1

在p标记上移动max-height和overflow。

在msgBox中添加了padding-right: 2px;。

＆＃13;

#msgbox,
#opt a:hover {
  background-color: #fff
}

#header,
#msgbox p,
#opt,
#whitpag,
body {
  margin: 0
}

#header {
  text-align: center;
  background: linear-gradient(to right, #0ff, purple);
  padding: 20px;
  border-bottom: 2px solid #d3d3d3
}

#header h1 {
  margin: 0;
  font-family: 'Great Vibes', cursive;
  color: #fff;
  font-size: 40px
}

#whitpag {
  padding: 10px
}

#dabba {
  border: 2px solid #000;
  border-radius: 5px;
  background-color: #d3d3d3;
  max-width: 700px;
  margin: 0 auto
}

#opt {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: 2px solid #000;
  background-color: #dc143c;
  color: #fff;
  padding: 0 4px
}

#opt a,
p {
  text-decoration: none;
  color: #fff;
  padding: 0
}

#opt a:hover {
  color: #dc143c
}

#msgbox {
  margin: 10px;
  border: 1px solid grey;
  border-radius: 5px;
  padding-right: 2px;
}

#msgbox p {
  padding: 5px;
  color: #000;
  font-size: 16px;
  max-height: 300px;
  overflow: auto;
}

#inpt {
  margin: 0 10px 10px
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>The Joint.</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

<body>
  <div id="header">
    <h1>The Joint.</h1>
  </div>
  <div id="whitpag">
    <div id="dabba">
      <div id="opt">
        <p><strong><?php 
$lgq="SELECT message FROM message ORDER BY DATE_TIME DESC";
$log=$mysqli->query($lgq);
$rows=$log->num_rows;
$rem=100-$rows;
	echo "Auto Delete In ".$rem." Messages, Reload Not refresh to see New Texts"; ?></strong></p>
        <p><b><a href="https://www.google.com">
		    			Log Out
	</a></b></p>
      </div>
      <div id="act">
        <div id="msgbox">
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
            publishing software like Aldus PageMaker including versions of Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
            printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
            release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
            typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
            Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
            specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
            more recently with desktop publishing software like Aldus PageMaker including versions of Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
            the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
            in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem IpsumLorem Ipsum is simply dummy text of the printing and
            typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
            the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
            including versions of Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
            it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
            Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
            dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
          </p>

        </div>
        <div id="inpt">
          <form method="POST" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>">
            <input type="text" name="message">
            <input type="submit" name="send" value="send">
        </div>
        </form>
      </div>
    </div>
  </div>
  </div>

</body>

</html>

＆＃13;

溢出：auto使边框半径为0px，如何解决此问题。

1 个答案: