0

現在、リッチ テキストの書式設定に UIWebview を使用しています。同じ行の中央に一連のアイコン (PNG 画像) とそれに続くキャプションを配置したいと思います。期待される効果を得るために css スタイルを正しく設定するのに問題があります。これは、Objective C よりも CSS 関連の質問です。

これまでのところ、私がやったことは次のとおりです。

NSString* htmlContentString = [NSString stringWithFormat:
                                   @"<html>"
                                   "<style type=\"text/css\">"
                                   "h1 { font-size: 40px;\
                                         font-family: Wisdom Script;\
                                         text-align: center;\
                                         margin-top:5px;\
                                         margin-bottom:0px;\
                                         background-color: black;\
                                   }"
                                   "body { background-color:transparent;\
                                           font-family:Helvetica;\
                                           font-size:14;\
                                           margin-top:0px;\
                                    }"
                                   "#people { background: yellow\
                                              url('tipnbpeople_icon.png')\
                                              no-repeat left center;\
                                              padding-left: 45 px;\
                                              line-height: 40px;\
                                   }"
                                   "#container {\
                                            width: 300px; \
                                            margin:0px auto;\
                                            border:1px dashed #333;\
                                   }"

                                   "</style>"

                                   "<body>"
                                        "<h1>%@</h1>"
                                        "<div id=\"container\">\
                                            <div id=\"people\">Caption1</div>\
                                            <div id=\"people\">Caption2</div>\
                                            <div id=\"people\">Caption3</div>\
                                        </div>"
                                   "</body></html>"\
                                   , noAccentTipName];

私が得ている結果は、アイコンとキャプションの連続ですが、同じ行にはありません。何か案が？

4

1 に答える 1

0

これmargin:0px autoにより、包含ブロックをページの中央に配置できます。ここで、設定した幅が固定されました。固定されているため、コンテンツは固定幅内に収まるように試行され、複数行で表示されます。代わりに使用する必要があるのは、コンテナ div に text-align を使用することです。

これが私が最終的に使用するコードです：

 NSString* htmlContentString = [NSString stringWithFormat:
                                   @"<html>"
                                   "<style type=\"text/css\">"
                                   "h1 { font-size: 40px;\
                                         font-family: Wisdom Script;\
                                         text-align: center;\
                                         margin-top:15px;\
                                         margin-bottom:0px;\
                                         background-color: transparent;\
                                   }"
                                   "body { background-color:transparent;\
                                           font-family:Helvetica;\
                                           font-size:14;\
                                           margin-top:0px;\
                                    }"
                                   " img {\
                                          width:40px;\
                                          height:35px;\
                                          vertical-align:bottom;\
                                   }"


                                   "#text {\
                                        width:60px\
                                   }"
                                   "#container {\
                                            text-align:center;\
                                   }"
                                   ".insetText {\
                                   color: #020202;\
                                   text-shadow: 0 -1px 0 rgba(0,0,0,0.15),\
                                   0 1px 0 rgba(255,255,255,0.8)}"
                                   "@font-face { font-family: 'Wisdom Script'; \
                                   src: local('WisdomScriptAI'),\
                                   url('wisdom_script.ttf') format('truetype'); }"
                                   "</style>" //end the style section

                                   "<body>" //start content
                                        "<h1 class=\"insetText\">%@</h1>"
                                        "<div id=\"container\" class=\"insetText\">\
                                            <img src=\"tipnbpeople_icon.png\"/>Caption1\
                                            <img src=\"clock_icon.png\"/>Caption2\
                                            <img src=\"chef_icon.png\"/>Captions3</div>"
                                   "</body></html>"\
                                   , noAccentTipName];

これにより、対応するキャプション付きの 3 つのアイコンが同じ行に表示されます。

于 2012-05-24T19:01:51.107 に答える