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 使用文本对齐。

这是我最终使用的代码：

 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 回答