-2

我不得不在我的 html 代码中正确排列项目。我不知道为什么他们没有按照我想要的方式排队。我没有设计这个网站，我只是在添加它。这也是一个文字新闻页面，我无权更改站点范围的 css，所以我使用的是内联 css，因为<style>标签位于我无权访问的页眉中。抱歉，我应该在发布问题之前将 CSS 提取出来，以便更容易理解。但我是程序员而不是网页设计师，我并不总是记得你不应该多次使用 id。

我遇到的第一个问题是在我的网站上排列 4 个项目。我有 2 个文本字符串和图像以及一条水平线。我想要第一个字符串左对齐，第二个字符串右对齐，图像在它的右边。然后我希望<hr>它就在它之下。我试图通过将第一个字符串放在 div 上，将第二个字符串与图像放在另一个单独的 div 中来做到这一点。我得到的是3行。第一个字符串在一行左对齐。第二个字符串与第二行和下一行的图像右对齐<hr>。我尝试在 html 属性和 css 中使用不同的对齐设置，但我似乎无法摆脱第一个字符串之后的换行符。我错过了什么？我知道这应该很简单？会不会是wordpress css？

我的第二个问题是类似的。我有一个带有图像的表格单元格（框中的 x）。我可以让图像证明正确，但我无法让它垂直对齐到 td 的顶部。我错过了什么？

这是一些示例 html：这更容易理解吗？

CSS：

table#one {
    width=900px; 
    margin-left: auto; 
    margin-right: auto;
}
div#div1 {
    font-size: 1em; 
    line-height: 1em; 
    font-weight: bolder; 
    padding: 0px;
}
td#td1 {
    border: none; 
    background-color: #f8d3cf; 
    width:125px; 
    height:80px; 
    border-spacing: 10px; 
    padding:0;
}
div#div2 {
    padding:0; 
    vertical-align:top;
}
a#a1 {
    padding: 0px;
}
img#img1 {
    padding: 0px;
}
td#td3 {
    border: none; 
    width:10px;
}
td#td4 {
    border: none; 
    font:.6em Arial, Helvetica, sans-serif; 
    width:125px; 
    height:20px;
}

HTML：

<table id="one">
    <tr>
        <td>
            <div id="div1">My Color Library</div>
            <div align="right" class="removeall">
                <a href="colors">
                    <img src="http://www.2100computerlane.net/workingproject/images/x-button.png" />
                    <bold>&nbsp;Remove All</bold>
                </a>
            </div>
            <HR/>
            </p>
            <div class="mycolor">
                <table><!--width="900px"  -->
                    <tr>
                        <td id='td1' align="right" valign="top"><a href="f8d3cf" id="a1"><img src="http://www.2100computerlane.net/workingproject/images/x-button.png" /></a></div></td>

                    </tr>   
                    <tr>
                        <td  id="td4">Desert Warmth<br/>70YR 56/190 A0542</td>                                                  
                    </tr>

                </table>

            </div>
        </td>
    </tr>
</table>
4

1 回答 1

2

要回答您的第一个问题，您的代码中有两个 DIV 元素：

<div id="div1">My Color Library</div>
<div align="right" class="removeall">
    <a href="colors">
        <img src="images/x-button.png" />
        <bold>Remove All</bold>
    </a>
</div>

DIV 是块级元素，这意味着相邻的 DIV 是垂直堆叠的。所以，标题下方的空隙实际上是第二个DIV的区域。

我相信你想要这个：

<div id="div1">
    My Color Library
    <div class="removeall">
        <a href="colors">
            <img src="images/x-button.png" />
            <bold>Remove All</bold>
        </a>
    </div>
</div>

CSS：

.removeall {
    float: right;    
}

因此，只需将第二个 DIV 放入 1. DIV 中，然后将其浮动到右侧。

关于你的第二个问题，这个 CSS 应该可以解决问题：

#td1 {
    vertical-align: top;
}

#td1 img {
    vertical-align: top;   
}

现场演示：http: //jsfiddle.net/BrR2c/12/show/

于 2012-11-10T23:39:30.650 回答