Question

我想在div中水平显示mysql结果，在overflow-x : scroll上设置div但是它不起作用，结果是水平的，但是当页面宽度结束时它会在下一行上显示。{{3} }

而不是下一行我想要整行单行

这是代码

PHP / Html代码：

      <p1>Popular</p1><div class="posterbar">
      <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "movie_db2";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT `poster`, `movie`FROM `movie_db2`"   ;
$result = $conn->query($sql);

if ($result->num_rows > 0) {

     // output data of each row
     while($row = $result->fetch_assoc()) 
        echo "<div class=\"imgc\"><a href=".$row["movie"]."><img src =" . $row["poster"]. "></a></div>";


} else {
     echo "0 results";
}

$conn->close();
?> 
   </div>

Css：

.posterbar{
    position : relative;
    overflow-x: scroll;
    top : 400px;
    width: 85%;
    height: 211px;
    float: right;
    z-index: 45;
    background: #D8D8D8;
    border: 1px solid #979797;        
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.imgc {
    border: 1px solid white;
    display: inline-flex;
    max-height: 190px;
    max-width: 140px;       
}

Answer 1

像这样使用white-space: nowrap;容器：

＆＃13;

.posterbar {
    position: relative;
    overflow: auto;
    top: 0px;
    width: 85%;
    height: 180px;
    white-space: nowrap;
    z-index: 45;
    background: #D8D8D8;
    border: 1px solid #979797;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.imgc {
    width: 140px;
    height: 140px;
    border: 1px solid white;
    display: inline-block;
}

＆＃13;

<div class="posterbar">
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>             
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>
</div>

＆＃13;

nowrap的作用是：

空格的序列将折叠成单个空格。文本永远不会换行到下一行。该文本继续在同一行直到遇到一个标签

您可以阅读有关空白规则here

的更多信息

Answer 2

我在codepen上做了一个例子。 codepen here

的CSS：

.posterbar{
    position : relative;
    overflow-x: scroll;
    overflow-y: hidden;
    top : 100px;
    width: 85%;
    left: calc(100% - 85% );
    height: 160px;
    z-index: 45;
    background: #D8D8D8;
    border: 1px solid #979797;
    white-space: nowrap;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.imgc {
    border: 1px solid white;
    display: inline-flex;
    max-height: 190px;
    max-width: 140px;
  background: red;
  width: 190px;
  height: 140px;
}

HTML：

 <div class="posterbar">
    <div class="imgc">
       <img src=""/>
     </div>
</div>

如何水平显示div元素

2 个答案: