Home > Article > Web Front-end > How to achieve centering of li without line breaks inside? (li length is not fixed)_html/css_WEB-ITnose
How to achieve centering of li without line breaks inside? (li length is not fixed)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:372245browse
I currently use the li tag and set the display:inline; of li to achieve this. But if the length of li is too long, it will wrap when it reaches the second line. How to achieve this? Note: 1. This is dynamically generated by reading data in the background, that is, the number of li is not fixed, and the length of each li is not fixed
2. Each line is required to be centered overall, and the li does not wrap internally
3. I don’t know if it’s a problem with the network or the csdn program, but the pictures just can’t be uploaded
Reply to the discussion (solution)
Not sure. . Can you post the code and take a look?
1. There is a problem if the li does not wrap internal lines. If the amount of your data is greater than the maximum width of your current li, will it wrap or not display?
2. If everything you said is centered, there is no line wrapping problem. The data can be pre-processed and the corresponding length intercepted.
Setting nowrap will not wrap lines.
li { display: inline; white-space: nowrap;} Add the css without line breaks to the ul and then try
#ul {white-space:nowrap; width:920px; overflow:hidden;text-overflow:ellipsis;}#li {*float:left; width:90px; margin:0 5px; *clear:right; text-align:center; display:inline-block} Please note that my ul automatically follows the width of the div container Adapted, my code is posted below. The width of the external div is dynamic and changes with the change of the page. The desired effect is that the label is centered and the li does not wrap inside. However, if the li is not wide enough, it must be able to run to the next line. A line of
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type='text/css'>.bNav{ background-color: #3CA9FE; text-align: center; line-height: 30px; font-size: 14px; margin-top: 5px;width:100%;} .bNav ul { padding: 0; width:100%;margin: 0 auto; } .bNav ul li { display:inline; padding: 0; margin-right: 15px;margin-left: 10px; }</style></head><body> <!--系统链接--> <div id="bNav" class="bNav"><ul><li>局数据中心建设</li><li >数据采集安装</li><li ></li><li >生产指挥</li><li >采油工程决策</li><li >鲁明采油工程综合业务平台</li><li >局采油工程综合业务推广专题</li><li>鲁明公司GIS系统</li><li>局动态监测</li><li>电子地宫</li></ul></div></body></html> is mentioned to add nowrap, have you tried it?
Online demo code
Please note that my ul automatically adapts to the width of the div container. My code is posted below. The width of the external div is dynamic and changes as the page changes. , the desired effect is that the label is centered and there is no line break inside the li, but if the width of this line of li is not enough, it must be able to run to the next line
text-algin:center , display:inline ; If in IE6 , 7 LI will not wrap automatically. Additional processing is required, and if your width exceeds one line and there are a few more words in the second line, the words in your second line will also be centered.
display:inline-block
Give li
I told you to add nowrap, have you tried it?
Online demo code
Please note that my ul automatically adapts to the width of the div container. My code is posted below. The width of the external div is dynamic and changes with the page. It changes with changes. The desired effect is that the label is centered and there is no line wrapping inside the li. However, if the width of this line of li is not enough, it must be able to run to the next line
display:inline-block
Give it to li
display:inline-block
Give li
must block
because inline means inline elements, inline elements are allowed to cross lines (similar to natural text that exceeds one line and is printed to the next line)
block will not cross lines (of course the content will be stretched Height)
So your problem is that the text in the block only displays one line without wrapping
.bNav ul li {
display: inline;
display:inline- block;
display:inline-table;
padding: 0;
margin-right: 15px;
margin-left: 10px;
text-overflow: ellipsis;
white- space: nowrap;
}
All three displays seem to work
display:inline-block
Give li
must block
because inline means inline elements, inline elements are allowed to cross lines (similar to natural text that exceeds one line and is printed to the next line)
block will not cross lines (of course the content will be stretched Height)
So your problem is that the text in the block only displays one line without line breaks
What I want is a solution that can achieve the effect. Why are you talking so much? Or can you give me a solution?
Look at the 12th floor~~~~
First of all, I am not a programmer, I have also done programming.
Secondly, except for adding a line of white-space: nowrap; in the .bNav ul li style, the other codes are all the ones you posted above. So if I say you haven’t tried it, I probably won’t be unfair to you.
Below is a dynamic screenshot of the above demo code. You can see clearly how the browser window shrinks and then shrinks:
1) Whether the width of the div changes dynamically
2) Whether each li note is centered
3) Is there no line break inside li?
4) If li is not wide enough, will it run to the next line?
Do you have any other needs? I don’t know how many years you have been doing procedures? You are the second person I have come across who has such a lousy attitude towards solving a problem.
How many years have you been doing procedures? ? ? ? Did you see my needs? ? ? The div width is dynamic, dynamic! ! ! Please shrink the browser window and then shrink it again
First of all, I am not a programmer, and I have also done programming.
Secondly, except for adding a line of white-space: nowrap; to the .bNav ul li style, the other codes are all the ones you posted above. So if I say you haven’t tried it, I probably won’t be unfair to you.
Below is a dynamic screenshot of the above demo code. You can see clearly how the browser window shrinks and then shrinks:
1) Whether the width of the div changes dynamically
2) Whether each li note is centered
3) Is there no line break inside li?
4) If li is not wide enough, will it run to the next line?
Do you have any other needs? I don’t know how many years you have been doing procedures? You are the second person I have come across who has such a lousy attitude towards solving a problem.
How many years have you been doing procedures? ? ? ? Did you see my needs? ? ? The div width is dynamic, dynamic! ! ! Can you shrink the browser window and then shrink it again?
I mentioned adding nowrap, have you tried it?
Online demo code
Please note that my ul automatically adapts to the width of the div container. My code is posted below. The width of the external div is dynamic and changes with the page. Changes with changes. The desired effect is that the label is centered and there is no line wrapping inside the li. However, if the width of this line of li is not enough, it must be able to run to the next line
I don’t do anything, I play this purely as a business hobby
Sorry, it’s not mine An advanced browser, Google Chrome is used by many people, don’t say you haven’t heard of it.
Reference: IE6 CSS display:table fix?
The dynamic screenshot below is a simulated low version browser of IE 11 under Win 8.1, which may not be valid in your actual ie6, ie7, ie8, ie9, ie10. But if you are still interested, you can click on the demo results to make it compatible with your ie6, ie7, ie8, ie9, and ie10.
Can you try IE compatibility mode? There is also the 12th floor, including ie6, ie7, ie8, ie9, ie10, ie, IE can't handle it. What are you doing?
I don’t do anything, I play this purely as a business hobby
Sorry, it’s not my browser that’s advanced, Google Chrome is used by many people, don’t say you didn’t listen. Pass.
Reference: IE6 CSS display:table fix?
The dynamic screenshot below is a simulated low version browser of IE 11 under Win 8.1, which may not be valid in your actual ie6, ie7, ie8, ie9, ie10. But if you are still interested, you can click on the demo results to make it compatible with your ie6, ie7, ie8, ie9, and ie10.
Can you try the IE compatibility mode? There is also the 12th floor, including ie6, ie7, ie8, ie9, ie10, ie can't handle it. What are you doing?
I don’t do anything, I play this purely as a business hobby
Sorry, it’s not my browser that’s advanced, Google Chrome is used by many people, don’t talk about you Never heard of it.
Reference: IE6 CSS display:table fix?
The dynamic screenshot below is a simulated low version browser of IE 11 under Win 8.1, which may not be valid in your actual ie6, ie7, ie8, ie9, ie10. But if you are still interested, you can click on the demo results to make it compatible with your ie6, ie7, ie8, ie9, and ie10.
Can you try the IE compatibility mode? There is also the 12th floor, including ie6, ie7, ie8, ie9, ie10, ie can't handle it. What are you doing?
After careful testing and comparison, I found that yours is OK. The main reason is that your css has such a zoom:1. This is probably an IE bug. In short, the problem is solved! Tell me how you first came up with the idea of using zoom? I really haven't used it. . . Give it all to you!
I didn’t think of using zoom at first, and I couldn’t think of using zoom because I said above that I’m not a programmer. This solution was searched online when you asked for compatibility with IE6. Reference The link has been given above, and the respondent also gave the function of each css.
Helping others solve problems is a happy thing in itself, but when you think of ways to help solve problems, and the questioner says you don’t understand and don’t speak, it really makes you feel unhappy. As a result, I made several typos when replying. It originally meant "I'm not a programmer, and I've never done programming", but it ended up being "I'm not a programmer, and I've also done programming". It originally meant "I'm not a programmer, and I've also done programming." He said "I don't do anything, I play this purely as a hobby", but ended up saying "I don't do anything, I play this purely as a business hobby".
Finally, to translate, the function of zoom is to trigger the IE-specific hasLayout attribute of the li node whose display is inline.
It’s OK to solve the problem, do it and cherish it.
After careful testing and comparison, I found that yours is OK. The main reason is that your css has such a zoom:1. This is probably an IE bug. In short, the problem is solved! Tell me how you first came up with the idea of using zoom? I really haven't used it. . . Give it all to you!