gpt4 book ai didi

html - CSS:li 内的 p 元素转到新行

转载 作者:可可西里 更新时间:2023-11-01 13:34:58 24 4
gpt4 key购买 nike

我对 li 中的 p 元素有疑问。它应该在同一行中看到,并且 ul 元素应该溢出水平滚动条。但是它不起作用。

HTML如下:

   <div id="tests" class="container">
<form>
<input type="text" id='search-textbox' placeholder='Action name'/>
<input type="button" id='search-button'value="Search"/>
</form>
<div class="clip">
<ul id="ul-tests">
<li>
<p>Action-001</p>
<ul>
<li>
<p>Action-001-001</p>
<ul>
<li>
<p>Action-001-001-001</p>
<ul>
<li><p>Hello-Action-001-001-001-001</p></li>
<li><p>Hello-Action-001-001-001-002</p></li>
<li><p>Hello-Action-001-001-001-003</p></li>
<li><p>Hello-Action-001-001-001-004</p></li>
<li><p>Hello-Action-001-001-001-005</p></li>
<li><p>Hello-Action-001-001-001-006</p></li>
<li><p>Hello-Action-001-001-001-007</p></li>
<li><p>Hello-Action-001-001-001-008</p></li>
<li><p>Hello-Action-001-001-001-009</p></li>
<li><p>Hello-Action-001-001-001-010</p></li>
</ul>
</li>
<li><p>bell-Action-001-001-002</p></li>
<li><p>bell-Action-001-001-003</p></li>
<li><p>bell-Action-001-001-004</p></li>
<li><p>bell-Action-001-001-005</p></li>
<li><p>bell-Action-001-001-006</p></li>
<li><p>bell-Action-001-001-007</p></li>
<li><p>bell-Action-001-001-008</p></li>
<li><p>bell-Action-001-001-009</p></li>
<li><p>bell-Action-001-001-010</p></li>
</ul>
</li>
<li><p>Action-001-002</p></li>
<li><p>Action-001-003</p></li>
<li><p>Action-001-004</p></li>
<li><p>Action-001-005</p></li>
<li><p>Action-001-006</p></li>
<li><p>Action-001-007</p></li>
<li><p>Action-001-008</p></li>
<li><p>Action-001-009</p></li>
<li><p>Action-001-010</p></li>
</ul>
</li>
<li><p>Action-002</p></li>
<li><p>Action-003</p></li>
<li><p>Action-004</p></li>
</ul>
</div>
</div>

CSS如下:

    *
{
margin:0;
padding:0;
}
body, html
{
min-width: 1000px;
min-height:700px;
}
div#tests
{
top:40px;
left:40px;
bottom:20px;

width:240px;

display:block;

position:absolute;
}
div#tests.container
{
background-color:#ccc;

border-radius:4px;
}

div#tests.container>form
{
top:4px;
left:4px;
right:4px;

height:32px;
min-height:32px;

overflow: hidden;

display:block;
position: absolute;
}

div#tests.container>form>input#search-textbox
{
top:0;
left:0;

height:28px;
min-height:28px;

width:150px;
min-width:150px;

border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;

border: 1px solid #9c9c9c;
font: normal 18px 'trebuchet MS', arial, helvetica;

display: inline-block;
position: absolute;
}

div#tests.container>form>input#search-textbox::-webkit-input-placeholder
{
padding-left:10px;
color: #9c9c9c;
font-style: italic;
}

div#tests.container>form>input#search-textbox:-moz-placeholder
{
color: #9c9c9c;
font-style: italic;
}

div#tests.container>form>input#search-textbox:-ms-placeholder
{
color: #9c9c9c;
font-style: italic;
}

div#tests.container>form>input#search-button
{
top:0;
right:0;

height:30px;
min-height:30px;

width:78px;
min-width:78px;

display:inline-block;
position:absolute;
}

div.clip
{
top:38px;
left:4px;
right:4px;
bottom:4px;

border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;

background-color: #FFF;

overflow:scroll;

display:block;
position: absolute;
}

ul#ul-tests
{
list-style-type: none;
margin-left:20px;
}

ul#ul-test.hidden-n p
{
display:none;
}

ul#ul-tests ul
{
list-style-type:none;
margin-left:20px;
}

链接到 fiddle .请不要建议使用固定宽度尺寸。因为,文本可以有不同的大小。谢谢您的回答。

最佳答案

添加此设置以防止换行:

li p {
white-space: nowrap;
}

jsFiddle Demo

关于html - CSS:li 内的 p 元素转到新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19175931/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com