Question

我制作了手风琴，我想在其中显示一些图片，但我想让它们排成一行，就像一排，现在它们垂直显示我希望它们水平显示，我尝试过很多东西我用谷歌搜索但无法得到我的答案。

是我的HTML代码。

<div id="accordion">
   <h3 class="FirstItem">Christmass trees </h3>
   <div class="SecondItem">

   <img  src="Pics/Products/Trees/Xtree1.jpg" />
   <img  src="Pics/Products/Trees/Xtree2.jpg" />
   <img  src="Pics/Products/Trees/Xtree3.jpg" />
   <img  src="Pics/Products/Trees/Xtree4.jpg" />
   <img  src="Pics/Products/Trees/Xtree5.jpg" />
   <img  src="Pics/Products/Trees/Xtree6.jpg" />
   <img  src="Pics/Products/Trees/Xtree7.jpg" />
   <img  src="Pics/Products/Trees/Xtree8.jpg" />
   <img  src="Pics/Products/Trees/Xtree9.jpg" />
   <img  src="Pics/Products/Trees/Xtree10.jpg" />

   </div>
</div>

CSS代码： -

 #accordion{
    width: 700px;

}
#accordion .FirstItem{
    background: url("../Pics/WhiteBack.jpg")repeat 0 0;
    color: #808080 ;
}
#accordion .SecondItem{
    background: url("../Pics/WhiteStars.jpg")repeat 0 0;
    height: 200px;
}

JS代码，如果你需要它。

$(function(){
   $("#accordion").accordion({collapsible: true, active: false});
});

Answer 1

对不起，如果我引起一些混乱，我所要做的只是添加

white-space: nowrap;到我的CSS代码，所以它看起来像这样。

#accordion{
    width: 700px;
    white-space: nowrap;
}

我只是为未来想要做类似事情的人添加这个答案。

@Pangloss回答了这个问题

Answer 2

使用ul，li。

＆＃13;

<ul>
    <li><img src=""/></li>
    <li><img src=""/></li>
  <li><img src=""/></li>
  <li><img src=""/></li>
  <li><img src=""/></li>
  <li><img src=""/></li>
  <li><img src=""/></li>
  </ul>

＆＃13;

public function car( $cardId )
{
        $carId = (int) \Yii::$app->request->get( 'car_id' );

        if ( empty( $carId ) ) {
            throw new \yii\web\BadRequestHttpException( 'Wrong car id. It must be integer, greater than 0' );
        }

        $externalVinService = new externalVinService();

        $vinNumberResponseData = $externalVinService->getCarVinNumber( $carId );

        if ( $vinNumberResponseData['code'] !== 200 ) {
            \Yii::$app->response->statusCode = $vinNumberResponseData['code'];
            return [ 'message' => 'Something is wrong with car VIN external service' ];
        }

        $carModel = new carModel( $cardId );

        $carData = $carModel->getCarData();

        $carData['vin'] = $vinNumberResponseData['data']['vin'];

        \Yii::$app->response->statusCode = 200;

        return $carData;
}

＆＃13;

如何在线显示手风琴项目？

2 个答案: