Question

我想要的是让图像检查在列表项之外，因为我可以让段落在同一个块中（如果这是一个正确的术语），但它看起来仍然是在图像检查下面。

谢谢！

HTML：

<div id="DIV_1">
    <ul id="UL_2">
        <li>Explore the impact of your past stories on who you are and what you love, so that you can bring those elements to life in your design.
        </li>
        <li>Discover how to make your style stand out, so that your spaces are truly unique, and memorable.
        </li>
        <li>Claim your Design Style for your home by creating your own Style Board, so that you know exactly what you’re aiming for throughout your project.
        </li>
    </ul>
</div>

CSS：

ul li {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    height: 76px;
    overflow-wrap: break-word;
    text-decoration: none solid rgb(51, 51, 51);
    width: 934px;
    word-wrap: break-word;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 467px 38px;
    transform-origin: 467px 38px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 300 normal 18px / 26px Arial, sans-serif;
    list-style: none outside none;
    margin: 20px 0px 0px;
    outline: rgb(51, 51, 51) none 0px;
}

ul li:before {
    color: rgb(51, 51, 51);
    content: ' ';
    display: inline-block;
    height: 43px;
    overflow-wrap: break-word;
    text-decoration: none solid rgb(51, 51, 51);
    width: 40px;
    word-wrap: break-word;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 20px 21.5px;
    transform-origin: 20px 21.5px;
    caret-color: rgb(51, 51, 51);
    background: rgba(0, 0, 0, 0) url("http://tdhdp.lineoclients.com/wp-content/uploads/2017/05/li-image.png") repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    font: normal normal 300 normal 18px / 26px Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
}

Answer 1

只需添加以下css代码

ul li {
 display:flex;
}
ul li:before {
 margin-right:10px;
}

<强> update jsfiddle

Answer 2

在display: flex;上使用li将连续创建2列。

ul li {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    height: 76px;
    overflow-wrap: break-word;
    text-decoration: none solid rgb(51, 51, 51);
    width: 934px;
    word-wrap: break-word;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 467px 38px;
    transform-origin: 467px 38px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 300 normal 18px / 26px Arial, sans-serif;
    list-style: none outside none;
    margin: 20px 0px 0px;
    outline: rgb(51, 51, 51) none 0px;
    display: flex;
}

ul li:before {
    color: rgb(51, 51, 51);
    content: ' ';
    height: 43px;
    overflow-wrap: break-word;
    text-decoration: none solid rgb(51, 51, 51);
    width: 40px;
    word-wrap: break-word;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 20px 21.5px;
    transform-origin: 20px 21.5px;
    caret-color: rgb(51, 51, 51);
    background: rgba(0, 0, 0, 0) url("http://tdhdp.lineoclients.com/wp-content/uploads/2017/05/li-image.png") repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    font: normal normal 300 normal 18px / 26px Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
    margin: 0 .5em 0 0;
}

<div id="DIV_1">
	<ul id="UL_2">
		<li>Explore the impact of your past stories on who you are and what you love, so that you can bring those elements to life in your design.
		</li>
		<li>Discover how to make your style stand out, so that your spaces are truly unique, and memorable.
		</li>
		<li>Claim your Design Style for your home by creating your own Style Board, so that you know exactly what you’re aiming for throughout your project.
		</li>
	</ul>
</div>

我希望列表项中的文本与第一行到达底部的垂直左行相同

2 个答案: