我是Elm的新手。我希望每个viewInput文本框都换行。
view : Model -> Html Msg
view model =
div []
[ viewInput "text" "Address" model.address Address
, viewInput "text" "Address2" model.address2 Address2
, viewInput "text" "City" model.city City
, viewInput "text" "State" model.state State
, viewInput "text" "Zipcode" model.zipcode Zipcode
我尝试使用break标签,但似乎无法弄清楚,错误消息也无济于事。
谢谢
答案 0 :(得分:1)
像这样使用break标签
view : Model -> Html Msg
view model =
div []
[ viewInput "text" "Address" model.address Address
, br [] []
, viewInput "text" "Address2" model.address2 Address2
, br [] []
]
答案 1 :(得分:1)
由于input
是default的内联元素,因此您需要将其包装在block元素中以将其显示在单独的行上。可以使用div
标签:
view : Model -> Html Msg
view model =
div []
[ div [] [ viewInput "text" "Address" model.address Address ]
, div [] [ viewInput "text" "Address2" model.address2 Address2 ]
, div [] [ viewInput "text" "City" model.city City ]
, div [] [ viewInput "text" "State" model.state State ]
, div [] [ viewInput "text" "Zipcode" model.zipcode Zipcode ]
]
或者只需将此div
标记放入viewInput
实现中。
另一种选择是通过CSS
进行更改。
答案 2 :(得分:0)
您可以将viewInput
更改为返回List (Html Msg)
,然后在返回列表中包含br [] []
:
view : Model -> Html Msg
view model =
div []
viewInput "text" "Address" model.address Address
++ viewInput "text" "Address2" model.address2 Address2
++ viewInput "text" "City" model.city City
++ viewInput "text" "State" model.state State
++ viewInput "text" "Zipcode" model.zipcode Zipcode
]
viewInput: ... -> List (Html Msg)
viewInput ... =
[ ...
, br [] []
]