Question

我正在创建一个Android应用程序，这个html文件位于assets文件夹中。我想在标题的左侧对齐一条垂直直线，就像在雅虎新闻摘要应用程序中所做的那样。请参见此处的屏幕截图http://bit.ly/1BRljIX。

我尝试使用以下代码：

<img style="display: ;" src="sidebar_leader.png" width="2%"/>
<h3 style="display: inline;">We want sport to be safe, we want sport to be fun and we want to ensure that no matter what sport young people are involved in, that it takes place in the spirit of 'fair play'.</h3>

然而，这只是将图像与标题的第一行对齐，任何人都可以帮忙吗？

Answer 1

请参阅fiddle

试试这个

<img style="float:left;" src="sidebar_leader.png" width="2%" height="100px"/>
<h3 style="float:left;width:98%;">We want sport to be safe, we want sport to be fun and we want to ensure that no matter what sport young people are involved in, that it takes place in the spirit of 'fair play'.</h3>

我使用了float:left;代替display:inline; ..我的宽度为98％，实际上是100％ - （img的宽度）

Answer 2

您可以完全废弃图片并使用border-left稍微padding-left来区分图片。

通过这种方式，您可以减少对托管服务器的请求（因为您不再需要图像文件），并且您的网页将更轻量级，更易于移动。

使用CSS样式表，而不是像您一样使用的内联样式，代码如下：

＆＃13;

h3 {
  border-left: 4px solid #3BB6FE;
  padding-left: 10px;
}

＆＃13;

<h3>We want sport to be safe, we want sport to be fun and we want to ensure that no matter what sport young people are involved in, that it takes place in the spirit of 'fair play'.</h3>

＆＃13;

使用样式表有其好处，因为您可以在一个地方为所有h3元素指定样式，如果您需要在以后更新设计，则只需将其更改为一个放置，而不是试图在您的应用程序中找到该特定样式的每个实例。

如果您希望继续使用内联样式路线，您的代码将如下所示：

<h3 style="border-left: 4px solid #3BB6FE; padding-left: 10px;">We want sport to be safe, we want sport to be fun and we want to ensure that no matter what sport young people are involved in, that it takes place in the spirit of 'fair play'.</h3>

将图像对齐到标题左侧 - html

2 个答案:

请参阅fiddle