• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

text alignment in UL list

Contributor ,
Jul 05, 2022 Jul 05, 2022

Copy link to clipboard

Copied

I am having some problems with UL lists. I figured out how to code specific UL classes. The problem is, if the the line item is more than one line, the text floats to the left. Is there a way to align the text with the first line of the <li>? 

Here is my class:

/*Mobile*/
@media (max-width: 380px){
ul.specifications-info {
    list-style-type: none;
    padding-top: 10px;
    font-size: 1.5em;
    padding-left: 10px;
    margin-right: 10px;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    margin-left: 10px;
    text-align: left;
}
}
/*Tablet*/
@media (min-width:381px) and (max-width:949px){
ul.specifications-info {
    list-style-type: none;
    padding-top: 10px;
    font-size: 1.4em;
    padding-left: 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    text-align: left;
    left: 0px;
    list-style-position: inside;
}
}
 
/*Desktop*/
@media (min-width: 950px){
ul.specifications-info {
    list-style-type: none;
    padding-top: 10px;
    font-size: 1.3em;
    padding-left: 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    text-align: left;
}
}

Attached is what I'm getting:

 

Views

148

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2022 Jul 05, 2022

Copy link to clipboard

Copied

Use CSS list-style-position  (inside or outside).

https://www.w3schools.com/css/css_list.asp

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 05, 2022 Jul 05, 2022

Copy link to clipboard

Copied

I added. list-style-position: outside; to the code, but there was no change. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 05, 2022 Jul 05, 2022

Copy link to clipboard

Copied

What does your actual code look like as I can't see anything in the css that you posted that would be causing the issue?

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 05, 2022 Jul 05, 2022

Copy link to clipboard

Copied

<ul class = "specifications-info">
  <li><b>Detector:</b> Air equivalent ion chamber. </li>
  <li><b>Window:</b> Light-tight 0.9 mg/cm<sup>2</sup> Mylar laminate. 10 sq cm 
  area. 36 mm (1.4&quot;) dia. </li>
  <li><b>Readout:</b> LCD 8 digits </li>
<li><b>Indicator Light:</b> Green LED 10 pulses/min per mR/h. </li>
  <li>Red LED Over-range Indicator. </li>
<li><b>Range:</b></li> 
 <li>Rate 6 digits 0.01 mR/h to 100 mR/h in one range.</li> 
<li>Integrate 6 digits 0.01 mR to 9.9R. </li>
  <li><b>Photon Energy Range:</b> 15 KeV - 500 KeV ± 20% </li>
  <li><b>High Voltage:</b> Fully user adjustable (internal pot). </li>
  <li><b>X-Ray Rep Rate:</b> Use either rate or integrate mode for pulses with 
  repetition rate of less than 1.0 Sec. </li>
  <li>Use Integrate Mode for repetition rate less than 1.50 Sec. </li>
  <li><b>Electrometer:</b> Solid State MOSFET input. </li>
  <li><b>Electronics:</b> Adj H. V. Supply, Pulse Shaper. A-D converter LCD 
  drivers. Test and display functions. </li>
<li><b>Pulse Duration and Content:</b></li>
<li> With sufficient repetitions, TBM-XR and 
  TBM-EXR can accurately integrate pulses of less than a microsecond duration 
  and longer and including continuous emission. Pulse content of 0.5 nanoR are 
  measurable with sufficient repetition rate to give at least .01 mR/hr for at 
  least 5 to 10 seconds. </li>
  <li><b>Environment:</b> </li>
  <li>Temperature of Operation from -20° to 50° C </li>
  <li>Relative Humidity 0 - 95% </li>
  <li>Radio-frequency 10 mW/cm<sup>2</sup> up to 4 GHz affects meter viewing &lt; ± 
  10% </li>
 <li>Magnetic 200 Gauss ± 5% effect </li>
  <li>Geotropism &lt; ± 2% effect </li>
  <li><b>Response&nbsp;Time:</b> 2-3 seconds for rate and for integrate. </li>
  <li><b>Time&nbsp;to&nbsp;Zero:</b> If count-rate goes to zero, the digital display will 
  hold the old count for 12 seconds before displaying &quot;0.0.&quot; </li>
  <li><b>Batteries:</b> Front panel battery test is provided. <br>
  6 ea. (AA) NEDA 15A - over 100 hrs of operation. </li>
<li><b>Dimensions:</b></li>
  <li>5.5&quot; x 3.5&quot; (including handle) </li>
  <li><b>Weight:</b> TBM-IC-XRAY complete with batteries and internal detector: 
  2.4 lbs. </li>
  <li><b>Options:</b> </li>
  <li>Readout in Si units nGy and nGy/h. </li>
  <li>Ra-UBG - Check source. </li>
  <li>Other entrance window material or thickness. </li>
  <li>High voltage test button. </li>
  <li>5 cm nylon positioning bumpers. </li>
</ul>

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2022 Jul 05, 2022

Copy link to clipboard

Copied

Using this CSS

 

/*Mobile*/
body {
    margin: 20px;
}
ul.specifications-info {
    list-style-type: none;
    padding: 0;
    font-size: 1.5em;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
}
/*Tablet*/
@media (min-width:381px) {
    ul.specifications-info {
        font-size: 1.4em;
    }
}
/*Desktop*/
@media (min-width: 950px){
    ul.specifications-info {
        font-size: 1.3em;
    }
}

 

 

I get 

BenPleysier_0-1657072091365.png

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 06, 2022 Jul 06, 2022

Copy link to clipboard

Copied

Thanks, I will give that a shot. I wonder which attribute made the difference? Perhaps I had too many attributes.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 06, 2022 Jul 06, 2022

Copy link to clipboard

Copied

LATEST

Isn't this what definition lists <dl> are intended for? 

 

image.png

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines