要水平顯示顏色列表，而不是垂直使用CSS

-1

我有一個點燃的當前垂直顯示的顏色，但我需要的東西傳播出去明智的，當他們被添加到列表中的顏色列表寬度。以下是截圖：要水平顯示顏色列表，而不是垂直使用CSS

垂直列表

，我需要使它看起來像：

總之它好有每行3-4個顏色。如何在CSS中實現這一點？

的代碼是反應：和下面是CSS。

render() { 
    return (
     <div styleName={main}> 
      <DropDownButton> 
       {this.mapItems(colors)} 
      </DropDownButton> 
     </div> 
    ); 
    } 
createListItem(color) { 
     return (
      <a href="#" styleName={colorAll}> 
       <span style={{background:"#"+color}} styleName={spanStyle}> 

       </span> 
      </a> 
     ) 
     } 

     mapItems(colors) { 
     return colors.map(this.createListItem.bind(this)); 
     }

CSS：

.main { 
    height: 100%; 
    float: left; 
    width: 600px; 
} 
.spanStyle { 
    display: block; 
    height: 20px; 
    line-height: 20px; 
    width: 20px; 
    &:hover { 
    background-color: transparent; 
    } 
} 

.colorAll { 
    padding: 2px; 
}

來源

2016-09-22 user1234

你能告訴我們你的CSS代碼？ – ivan

你可以添加到父容器本性的判定：

display: flex; 
flex-direction:row: 
flex-wrap:wrap:

如果你想每行3個元素添加到子元素：flex-basis: 33%或者如果你想每row flex-basis:25% 4個元素。請閱讀here瞭解更多信息。

來源

2016-09-22 23:13:19 ciurciurek

從我所看到的，只是改變了height的價值.main：

.main { 
    height: 50%; 
    float: left; 
    width: 600px; 
}

或拉昇高度的像素值：

.main { 
    height: 70px; 
    float: left; 
    width: 600px; 
}

來源

2016-09-22 23:04:14 Johannes

我試過了，它只是隱藏剩下的內容，但不會導致其廣泛傳播 – user1234

更多的代碼有必要告訴你更多，像周圍發生的事情東星元素（HTML和CSS） – Johannes

似乎有一個影響顯示效果的'.main'和'.spanStyle'之間的附加元素 - 例如：在圖像中右側和下方有一個藍色邊框，這絕對不是由您發佈的任何內容引起的。 – Johannes

要水平顯示顏色列表，而不是垂直使用CSS

回答

相關問題