上下文
我使用Elm与 mdgriffith/style-elements v4.2.1 用于创建网页的布局和样式。
目标
我尝试将右对齐的行放置在另一行下方。
方法
style-elements 的 Element 模块公开了 below函数应该使这个任务变得简单。
其类型注释以及注释形式的解释:
below
: List (Element style variation msg) -- List of components what you want position below the pivot element
-> Element style variation msg -- pivot component
-> Element style variation msg -- Returned component
一个独立的示例:
Main.elm
module Main exposing (main)
import Color exposing (rgb)
import Element exposing (..)
import Element.Attributes exposing (..)
import Html exposing (Html)
import Style exposing (..)
import Style.Border as Border
import Style.Color as Color
import Style.Font as Font
type Styles
= None
| Title
| Menu
stylesheet =
Style.styleSheet
[ style None []
, style Title
[ Color.background (rgb 0 0 0)
, Color.text <| rgb 255 255 255
]
, style Menu
[ Border.all 3
, Color.background <| rgb 255 255 255
, Color.border <| rgb 0 0 0
, Color.text <| rgb 0 0 0
]
]
main : Html msg
main =
layout stylesheet <|
column None [] <|
[ row
Title
[ center
, verticalCenter
, padding 30
]
[ text "Title" ]
|> below
[ row Menu
[ alignRight
, moveUp 15
, spacing 20
]
[ el None [] (text "menu 1")
, el None [] (text "menu 2")
]
]
, row None
[ spread, padding 50 ]
[ el None [] (text "info 1")
, el None [] (text "info 2")
]
]
index.html:
<html>
<head>
<style>
/* you can style your program here */
</style>
</head>
<body style="position:relative">
<script>
var app = Elm.Main.fullscreen()
// you can use ports and stuff here
</script>
</body>
</html>
结果:
定位的行位于位置枢轴下方，但仍保持左对齐。
菜单 1 和菜单 2 项目应位于右侧
请不要有解决方法
只需使用 moveRight 即可解决此问题或paddingLeft功能，但它们是肮脏的修复并且容易出错，并且根据此 lecture定位应该与对齐一起工作
最佳答案
我深入研究了mdgriffith/style-elements v4.2.1的源代码，并在测试中找到了一个定位示例。
tests/Visual/Master.elm, line 302 ,
它传递多个el的返回值调用列表中的定位函数，并在其中应用对齐方式。
因此，我尝试使用带有一个 el 函数调用的列表作为定位函数的第一个参数，并将 row 调用的返回值传递为它的第三个参数。
此时link有一个交互式示例。
以下是相关片段:
[ row
Title
[ center
, verticalCenter
, padding 30
]
[ text "Title" ]
|> below
[ el Menu [ alignRight, moveUp 15 ] <| -- Call el and pass the return value of row to it as its 3-rd argument.
row None
[ spacingXY 30 0, paddingRight 20 ]
[ el None [] (text "menu 1")
, el None [] (text "menu 2")
]
]
关于elm - 如何将行或列相对于另一个组件定位，同时与 Elm 的 mdgriffith/style-elements 保持对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48267264/